@d3plus/docs 3.0.0-alpha.3

package/docs/Logo-Frames.js

@@ -0,0 +1,352 @@
+import {colorDefaults, colorLegible} from "@d3plus/color";
+const darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+const background = darkMode ? "#1B1C1D" : "white";
+const tickColor = darkMode ? "#dee2e6" : "#495057";
+const gridColor = darkMode ? "#495057" : "#dee2e6";
+const colors = colorDefaults.scale.range();
+const dColor = colors[0];
+const dAccent = colorLegible(dColor);
+const threeColor = colors[1];
+const threeAccent = colorLegible(threeColor);
+const plusColor = colors[2];
+
+const height = 200;
+const yAxisOffset = 35;
+const xAxisOffset = 46;
+const ySquares = 12;
+const xSquares = 30;
+const middle = ySquares / 2;
+const cellSize = (height - xAxisOffset) / ySquares;
+const width = cellSize * xSquares + yAxisOffset;
+const barSpacing = Math.ceil(xSquares / 5);
+
+const stemCenter = 2;
+const arcCenter = stemCenter + 3.5;
+const threeCenter = arcCenter + 10;
+const plusCenter = threeCenter + 8;
+const plusSize = ySquares / 4;
+
+export const sharedConfig = {
+  height,
+  noDataMessage: false,
+  width,
+  xDomain: [0, xSquares],
+  yDomain: [0, ySquares]
+};
+
+const hiddenAxis = {
+  barConfig: {
+    opacity: 0,
+    stroke: tickColor
+  },
+  gridConfig: {
+    opacity: 0,
+    stroke: gridColor
+  },
+  shapeConfig: {
+    fill: tickColor,
+    opacity: 0,
+    labelConfig: {
+      fontColor: tickColor
+    },
+    stroke: tickColor
+  }
+}
+
+const visibleAxis = {
+  barConfig: {
+    opacity: 1,
+    stroke: tickColor
+  },
+  gridConfig: {
+    opacity: 1,
+    stroke: gridColor
+  },
+  shapeConfig: {
+    fill: tickColor,
+    duration: 250,
+    opacity: 1,
+    labelConfig: {
+      fontColor: tickColor
+    },
+    stroke: tickColor
+  }
+}
+
+const dCircles = [
+  {id: "curve", r: cellSize * 5, x: arcCenter, y: middle, fill: dColor},
+  {id: "curve-mask", r: cellSize * 3, x: arcCenter, y: middle, fill: background}
+];
+
+const threeLabelConfig = {
+  fontMax: cellSize * ySquares * 2,
+  fontResize: true,
+  fontWeight: 700,
+  lineHeight: ySquares + 0.6,
+  textAnchor: "middle",
+  verticalAlign: "middle"
+};
+
+const plusLines = [
+  {shape: "Line", id: "plus-horizontal", x: plusCenter - plusSize, y: middle, fill: plusColor},
+  {shape: "Line", id: "plus-horizontal", x: plusCenter + plusSize, y: middle, fill: plusColor},
+  {shape: "Line", id: "plus-vertical", x: plusCenter, y: middle + plusSize, fill: plusColor},
+  {shape: "Line", id: "plus-vertical", x: plusCenter, y: middle - plusSize, fill: plusColor}
+];
+
+function randomY(x) { // min and max included 
+  const clamp = x / xSquares;
+  const max = (ySquares - 1) * clamp;
+  return Math.random() * (max - 1 + 1) + 1;
+}
+
+const createLines = id => Array.from({length: xSquares}, (_, index) => ({id, x: index, y: randomY(index)}));
+
+const iconCenter = threeCenter;
+const iconDCenter = iconCenter - 2;
+const iconThreeCenter = iconCenter + 2;
+export const icon = {
+  annotations: [
+
+    {
+      data: dCircles
+        .filter(d => !d.id.includes("mask"))
+        .map(d => {
+          const copy = {...d, x: d.x + (iconDCenter - arcCenter)};
+          return copy;
+        }),
+      fill: d => d.fill,
+      shape: "Circle",
+      strokeWidth: 0
+    },
+
+    {
+      data: [
+        {id: "curve-mask", height: cellSize * 11, width: cellSize * 5.2, x: iconDCenter - 2.65, y: middle, fill: background},
+        {id: "ascender", height: cellSize * 10, width: cellSize * 3, x: iconDCenter - 1.5, y: middle, fill: dColor},
+        // {id: "ascender-mask", height: cellSize * 6, width: cellSize * 1, x: iconDCenter - 0.45, y: middle, fill: background},
+        {id: "3", height: cellSize * 36, width: cellSize * 9, x: iconThreeCenter, y: middle, fill: "transparent"},
+      ],
+      fill: d => d.fill,
+      label: d => d.id === "3" ? 3 : false,
+      labelConfig: {
+        ...threeLabelConfig,
+        fontColor: dColor
+      },
+      padding: 0,
+      shape: "Rect",
+      strokeWidth: 0
+    },
+    {
+      data: plusLines.map(d => {
+        const copy = {...d, x: d.x - (plusCenter - iconCenter)};
+        return copy;
+      }),
+      shape: "Line",
+      stroke: background,
+      strokeWidth: cellSize * 1.5
+    }
+  ],
+  xConfig: hiddenAxis,
+  yConfig: hiddenAxis
+};
+
+export const animationFrames = [
+  {
+    annotations: [
+
+      {
+        data: dCircles,
+        fill: d => d.fill,
+        shape: "Circle",
+        strokeWidth: 0
+      },
+
+      {
+        data: [
+          {id: "curve-mask", height: cellSize * 11, width: cellSize * 5.2, x: arcCenter - 2.65, y: middle, fill: background},
+          {id: "ascender", height: cellSize * 10, width: cellSize * 3, x: arcCenter - 1.5, y: middle, fill: dColor},
+          {id: "ascender-mask", height: cellSize * 6, width: cellSize * 1, x: arcCenter - 0.45, y: middle, fill: background},
+          {id: "3", height: cellSize * 36, width: cellSize * 9, x: threeCenter, y: middle, fill: "transparent"},
+        ],
+        fill: d => d.fill,
+        label: d => d.id === "3" ? 3 : false,
+        labelConfig: {
+          ...threeLabelConfig,
+          fontColor: threeColor
+        },
+        padding: 0,
+        shape: "Rect",
+        strokeWidth: 0
+      },
+      {
+        data: plusLines,
+        shape: "Line",
+        stroke: plusColor,
+        strokeWidth: cellSize * 1.5
+      }
+    ],
+    xConfig: hiddenAxis,
+    yConfig: hiddenAxis
+  },
+
+
+
+
+  {
+    annotations: [
+
+      {
+        data: dCircles,
+        fill: "transparent",
+        shape: "Circle",
+        stroke: dColor,
+        strokeDasharray: d => d.id.includes("mask") ? "4 1" : false,
+        strokeWidth: 2
+      },
+
+      {
+        data: [
+          {id: "curve-mask", height: cellSize * 8, width: cellSize * 5.2, x: arcCenter, y: middle},
+          {id: "ascender", height: cellSize * 6, width: cellSize * 3, x: arcCenter, y: middle},
+          {id: "ascender-mask", height: cellSize * 4, width: cellSize * 1, x: arcCenter, y: middle},
+          {id: "3", height: (cellSize - 4) * ySquares, width: cellSize * 8, x: threeCenter + 1, y: middle},
+        ],
+        fill: d => d.id === "3" ? threeColor : "transparent",
+        label: d => d.id === "3" ? 3 : false,
+        labelConfig: {
+          ...threeLabelConfig,
+          fontColor: colorDefaults.light,
+          fontStroke: threeAccent,
+          fontStrokeWidth: 2
+        },
+        shape: "Rect",
+        stroke: d => d.id === "3" ? threeAccent : dColor,
+        strokeDasharray: d => d.id.includes("mask") ? "4 1" : false,
+        strokeWidth: 2,
+      },
+      {
+        data: plusLines
+          .map(d => {
+            const copy = {...d, x: d.x + 2};
+            return copy;
+          }),
+        shape: "Line",
+        stroke: plusColor,
+        strokeWidth: cellSize / 2
+      }
+    ],
+    xConfig: visibleAxis,
+    yConfig: visibleAxis
+  },
+
+
+
+
+  {
+    annotations: [
+
+      {
+        data: [
+          {id: "curve", r: cellSize, x: 17, y: 10},
+          {id: "curve-mask", r: cellSize * 0.75, x: 5, y: 7}
+        ],
+        fill: dColor,
+        shape: "Circle"
+      },
+
+      {
+        data: [
+          {id: "curve-mask",    width: cellSize * 2, height: cellSize * 2, x: barSpacing * 1, y: 1},
+          {id: "ascender",      width: cellSize * 2, height: cellSize * 5, x: barSpacing * 2, y: 2.5},
+          {id: "ascender-mask", width: cellSize * 2, height: cellSize * 3, x: barSpacing * 3, y: 1.5},
+          {id: "3",             width: cellSize * 2, height: cellSize * 8, x: barSpacing * 4, y: 4},
+        ],
+        fill: threeColor,
+        label: false,
+        labelConfig: threeLabelConfig,
+        shape: "Rect",
+        stroke: threeAccent,
+        strokeWidth: 2,
+        texture: "nylon",
+        textureDefault: {size: cellSize / 2, background: threeColor, stroke: threeAccent, strokeWidth: 1},
+      },
+      {
+        data: [
+          ...createLines("plus-horizontal"),
+          ...createLines("plus-vertical")
+        ],
+        shape: "Line",
+        stroke: plusColor,
+        strokeDasharray: d => d.id.includes("horizontal") ? "10 2" : false,
+        strokeWidth: 2
+      }
+    ]
+  },
+  {
+    annotations: [
+
+      {
+        data: dCircles,
+        fill: d => d.fill,
+        shape: "Circle",
+        strokeWidth: 0
+      },
+
+      {
+        data: [
+          {id: "curve-mask", height: cellSize * 11, width: cellSize * 5.2, x: arcCenter - 2.65, y: middle, fill: background},
+          {id: "ascender", height: cellSize * 10, width: cellSize * 3, x: arcCenter - 1.5, y: middle, fill: dColor},
+          {id: "ascender-mask", height: cellSize * 6, width: cellSize * 1, x: arcCenter - 0.45, y: middle, fill: background},
+          {id: "3", height: cellSize * 36, width: cellSize * 9, x: threeCenter, y: middle, fill: "transparent"},
+        ],
+        fill: d => d.fill,
+        label: d => d.id === "3" ? 3 : false,
+        labelConfig: {
+          ...threeLabelConfig,
+          fontColor: threeColor
+        },
+        padding: 0,
+        shape: "Rect",
+        strokeWidth: 0
+      },
+      {
+        data: plusLines,
+        shape: "Line",
+        stroke: plusColor,
+        strokeWidth: cellSize * 1.5
+      }
+    ],
+    xConfig: hiddenAxis,
+    yConfig: hiddenAxis
+  },
+
+
+
+
+  // {
+  //   annotations: [],
+  //   data: [
+  //     {shape: "Circle", id: "curve",         r: cellSize, x: 17, y: 10, fill: dColor},
+  //     {shape: "Circle", id: "curve-mask",    r: cellSize * 0.75, x: 5, y: 7, fill: dColor},
+  //     // {shape: "Bar",   id: "curve-mask",     x: barSpacing * 1, y: 1, fill: threeColor},
+  //     // {shape: "Bar",   id: "ascender",       x: barSpacing * 2, y: 2.5, fill: threeColor},
+  //     // {shape: "Bar",   id: "ascender-mask",  x: barSpacing * 3, y: 1.5, fill: threeColor},
+  //     // {shape: "Bar",   id: "3",              x: barSpacing * 4, y: 4, fill: threeColor},
+  //     // ...createLines("plus-horizontal"),
+  //     // ...createLines("plus-vertical")
+  //   ],
+  //   label: false,
+  //   shape: d => d.shape,
+  //   shapeConfig: {
+  //     Circle: {
+  //       r: d => d.r
+  //     },
+  //     fill: d => d.fill,
+  //     strokeDasharray: d => d.id.includes("horizontal") ? "10 2" : false,
+  //     strokeWidth: 2,
+  //     texture: d => d.shape === "Bar" ? "nylon" : false,
+  //     textureDefault: {size: cellSize / 2, background: threeColor, stroke: threeAccent, strokeWidth: 1},
+  //   }
+  // }
+];

package/docs/Logo.jsx

@@ -0,0 +1,30 @@
+import React, {useEffect, useRef, useState} from "react";
+import {Plot} from "@d3plus/react";
+import {sharedConfig, animationFrames} from "./Logo-Frames.js";
+
+const duration = 3000;
+
+const Logo = () => {
+
+  const [frame, setFrame] = useState(0);
+  const intervalRef = useRef(null);
+
+  useEffect(() => {
+    if (animationFrames.length > 1) {
+      intervalRef.current = setInterval(() => {
+        setFrame(prevFrame => prevFrame + 1);
+      }, duration);
+    }
+    return () => clearInterval(intervalRef.current);
+  }, []);
+
+  useEffect(() => {
+    if (frame >= animationFrames.length - 1) {
+      clearInterval(intervalRef.current);
+    }
+  }, [frame]);
+
+  return frame >= 0 ? <Plot className="d3plus-logo" config={{...sharedConfig, ...animationFrames[frame]}} /> : null;
+};
+
+export default Logo;

package/helpers/configify.js

@@ -0,0 +1,18 @@
+/**
+ * removes undefined config keys, which may cause issues with d3plus
+ * and also pollute the "Code" view in Docs
+ */
+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;
+ }, {});
+}

package/helpers/funcify.js

@@ -0,0 +1,14 @@
+/**
+ * allows overwriting the default toString method of a function
+ * in order for pretty doc printouts
+ */
+ export default function(fn, str) {
+
+  /** A toString to render the function in storybook */
+  // eslint-disable-next-line no-param-reassign
+  fn.toString = () => str;
+  fn.toJSON = () => str;
+
+  return fn;
+
+}

package/helpers/stringify.js

@@ -0,0 +1,30 @@
+/**
+ * converts d3plus config to pretty string output
+ */
+export default function(config, indent = 2) {
+
+  return JSON.stringify(config, replacer, indent)
+    // "data" cleanup
+    .replace(/\"(\{[^\}]+\})\"/g, "$1")
+    .replace(/\\"([A-z0-9]+)\\"\:/g, "$1:")
+    .replace(/([^\s]):([^\s^\/])/g, "$1: $2")
+    .replace(/([^\s]),([^\s])/g, "$1, $2")
+    .replace(/\[([^\]^\{]+)\]/g, str => str.replace(/ /gm, "").replace(/\n/gm, " "))
+
+    // remove parentheses from keys
+    .replace(/\"([A-z0-9]+)\"\:/g, "$1:")
+
+    // cleans up funcitons
+    .replace(/\"([^=].+=)> ([^\"].+)\"/g, "$1> $2")
+    .replace(/\:\s\"function\(([^\"].+)\"/g, "($1")
+    .replace(/\\n/g, "\n")
+    .replace(/\\"/g, "\"");
+
+}
+
+const replacer = (key, value) => {
+  if (!["annotations"].includes(key) && value instanceof Array && typeof value[0] === "object") {
+    return value.map(d => JSON.stringify(d));
+  }
+  return value;
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@d3plus/docs",
+  "version": "3.0.0-alpha.3",
+  "description": "Documentation and examples for the d3plus visualization library.",
+  "license": "MIT",
+  "homepage": "https://d3plus.org",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/d3plus/d3plus.git",
+    "directory": "packages/docs"
+  },
+  "keywords": [],
+  "scripts": {
+    "build": "storybook build --docs -o build",
+    "dev": "node ../../scripts/dev.js"
+  },
+  "dependencies": {
+    "@d3plus/core": "3.0.0-alpha.3",
+    "@d3plus/dom": "3.0.0-alpha.3",
+    "@d3plus/format": "3.0.0-alpha.3",
+    "@d3plus/locales": "3.0.0-alpha.3",
+    "@d3plus/react": "3.0.0-alpha.3",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/components": "^8.6.12",
+    "@storybook/icons": "^1.4.0",
+    "@storybook/manager-api": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@types/react": "^19.1.0",
+    "next": "^15.2.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.5"
+  },
+  "devDependencies": {
+    "@storybook/addon-controls": "^8.6.12",
+    "@storybook/addon-docs": "^8.6.12",
+    "@storybook/nextjs": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/theming": "^8.6.12",
+    "remark-gfm": "^4.0.1",
+    "storybook": "^8.6.12"
+  }
+}

package/packages/color/colorAdd.stories.jsx

@@ -0,0 +1,23 @@
+// WARNING: do not edit the top part of this file directly, it is generated
+// from the source code. Scroll down to the next WARNING and places stories below it.
+
+import React from "react";
+
+import {argTypes} from "../../args/color/colorAdd.args";
+import {colorAdd} from "@d3plus/color";
+
+export default {
+  title: "Color/colorAdd",
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Adds two colors together.",
+      },
+    },
+  }
+};
+  
+// WARNING: do not edit above this line of code directly, it is generated
+// from the source code. Stories below this line can be modified.
+

package/packages/color/colorAssign.stories.jsx

@@ -0,0 +1,23 @@
+// WARNING: do not edit the top part of this file directly, it is generated
+// from the source code. Scroll down to the next WARNING and places stories below it.
+
+import React from "react";
+
+import {argTypes} from "../../args/color/colorAssign.args";
+import {colorAssign} from "@d3plus/color";
+
+export default {
+  title: "Color/colorAssign",
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Assigns a color to a value using a predefined set of defaults.",
+      },
+    },
+  }
+};
+  
+// WARNING: do not edit above this line of code directly, it is generated
+// from the source code. Stories below this line can be modified.
+

package/packages/color/colorContrast.stories.jsx

@@ -0,0 +1,23 @@
+// WARNING: do not edit the top part of this file directly, it is generated
+// from the source code. Scroll down to the next WARNING and places stories below it.
+
+import React from "react";
+
+import {argTypes} from "../../args/color/colorContrast.args";
+import {colorContrast} from "@d3plus/color";
+
+export default {
+  title: "Color/colorContrast",
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "A set of default color values used when assigning colors based on data.",
+      },
+    },
+  }
+};
+  
+// WARNING: do not edit above this line of code directly, it is generated
+// from the source code. Stories below this line can be modified.
+

package/packages/color/colorDefaults.stories.jsx

@@ -0,0 +1,23 @@
+// WARNING: do not edit the top part of this file directly, it is generated
+// from the source code. Scroll down to the next WARNING and places stories below it.
+
+import React from "react";
+
+import {argTypes} from "../../args/color/colorDefaults.args";
+import {colorDefaults} from "@d3plus/color";
+
+export default {
+  title: "Color/colorDefaults",
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "A set of default color values used when assigning colors based on data.",
+      },
+    },
+  }
+};
+  
+// WARNING: do not edit above this line of code directly, it is generated
+// from the source code. Stories below this line can be modified.
+

package/packages/color/colorLegible.stories.jsx

@@ -0,0 +1,23 @@
+// WARNING: do not edit the top part of this file directly, it is generated
+// from the source code. Scroll down to the next WARNING and places stories below it.
+
+import React from "react";
+
+import {argTypes} from "../../args/color/colorLegible.args";
+import {colorLegible} from "@d3plus/color";
+
+export default {
+  title: "Color/colorLegible",
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Darkens a color so that it will appear legible on a white background.",
+      },
+    },
+  }
+};
+  
+// WARNING: do not edit above this line of code directly, it is generated
+// from the source code. Stories below this line can be modified.
+

package/packages/color/colorLighter.stories.jsx

@@ -0,0 +1,23 @@
+// WARNING: do not edit the top part of this file directly, it is generated
+// from the source code. Scroll down to the next WARNING and places stories below it.
+
+import React from "react";
+
+import {argTypes} from "../../args/color/colorLighter.args";
+import {colorLighter} from "@d3plus/color";
+
+export default {
+  title: "Color/colorLighter",
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Similar to d3.color.brighter, except that this also reduces saturation so that colors don't appear neon.",
+      },
+    },
+  }
+};
+  
+// WARNING: do not edit above this line of code directly, it is generated
+// from the source code. Stories below this line can be modified.
+

package/packages/color/colorSubtract.stories.jsx

@@ -0,0 +1,23 @@
+// WARNING: do not edit the top part of this file directly, it is generated
+// from the source code. Scroll down to the next WARNING and places stories below it.
+
+import React from "react";
+
+import {argTypes} from "../../args/color/colorSubtract.args";
+import {colorSubtract} from "@d3plus/color";
+
+export default {
+  title: "Color/colorSubtract",
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Subtracts one color from another.",
+      },
+    },
+  }
+};
+  
+// WARNING: do not edit above this line of code directly, it is generated
+// from the source code. Stories below this line can be modified.
+