@d3plus/docs 3.0.0-alpha.3

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

@@ -0,0 +1,81 @@
+// 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, Treemap} from "../../../args/core/charts/Treemap.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Charts/Treemap",
+  component: Treemap,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Uses the [d3 treemap layout](https://github.com/mbostock/d3/wiki/Treemap-Layout) to creates SVG rectangles based on an array of data. See [this example](https://d3plus.org/examples/d3plus-hierarchy/getting-started/) for help getting started using the treemap generator.",
+      },
+    },
+  }
+};
+
+const Template = (args) => <Treemap 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: [
+    {id: "alpha", value: 29},
+    {id: "beta", value: 10},
+    {id: "gamma", value: 2},
+    {id: "delta", value: 29},
+    {id: "eta", value: 25}
+  ],
+  groupBy: "id",
+  sum: "value"
+};
+BasicExample.parameters = {controls: {include: ["sum"]}};
+
+export const NestedData = Template.bind({});
+NestedData.args = {
+  data: [
+    {parent: "Group 1", id: "alpha", value: 29},
+    {parent: "Group 1", id: "beta", value: 10},
+    {parent: "Group 1", id: "gamma", value: 2},
+    {parent: "Group 2", id: "delta", value: 29},
+    {parent: "Group 2", id: "eta", value: 25}
+  ],
+  groupBy: ["parent", "id"],
+  sum: "value"
+};
+NestedData.parameters = {controls: {include: ["groupBy"]}};
+
+export const ChangingTilingMethod = Template.bind({});
+ChangingTilingMethod.args = {
+  data: [
+    {"Group": "Store", "Sub-Group": "Convenience Store", "Number of Stores": 100},
+    {"Group": "Store", "Sub-Group": "Grocery Store", "Number of Food Stores": 150},
+    {"Group": "Store", "Sub-Group": "Supercenters", "Number of Food Stores": 30},
+    {"Group": "Other", "Sub-Group": "Farmer's Market", "Number of Food Stores": 50},
+    {"Group": "Restaurant", "Sub-Group": "Fast-Food Restaurant", "Number of Food Stores": 60},
+    {"Group": "Restaurant", "Sub-Group": "Full-Service Restaurant", "Number of Food Stores": 120}
+  ],
+  groupBy: ["Group", "Sub-Group"],
+  sum: "Number of Food Stores",
+  tile: "slice"
+};
+ChangingTilingMethod.parameters = {controls: {include: ["tile"]}};
+
+export const SmallDataThreshold = Template.bind({});
+SmallDataThreshold.args = {
+  colorScale: "Population",
+  data: "https://datausa.io/api/data?measures=Population&drilldowns=State&Year=2018",
+  groupBy: "State",
+  sum: "Population",
+  threshold: 0.0025,
+  thresholdName: "States"
+};
+SmallDataThreshold.parameters = {controls: {include: ["threshold", "thresholdName"]}};

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

@@ -0,0 +1,27 @@
+// 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, Viz} from "../../../args/core/charts/Viz.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Charts/Viz",
+  component: Viz,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Creates an x/y plot based on an array of data. If *data* is specified, immediately draws the tree map based on the specified array and returns the current class instance. If *data* is not specified on instantiation, it can be passed/updated after instantiation using the [data](#treemap.data) method. See [this example](https://d3plus.org/examples/d3plus-treemap/getting-started/) for help getting started using the treemap generator.",
+      },
+    },
+  }
+};
+
+const Template = (args) => <Viz 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.
+

package/packages/core/components/Axis.stories.jsx

@@ -0,0 +1,27 @@
+// 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, Axis} from "../../../args/core/components/Axis.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Components/Axis",
+  component: Axis,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Creates an SVG scale based on an array of data.",
+      },
+    },
+  }
+};
+
+const Template = (args) => <Axis 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.
+

package/packages/core/components/AxisBottom.stories.jsx

@@ -0,0 +1,27 @@
+// 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, AxisBottom} from "../../../args/core/components/AxisBottom.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Components/AxisBottom",
+  component: AxisBottom,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Shorthand method for creating an axis where the ticks are drawn below the horizontal domain path. Extends all functionality of the base [Axis](#Axis) class.",
+      },
+    },
+  }
+};
+
+const Template = (args) => <AxisBottom 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.
+

package/packages/core/components/AxisLeft.stories.jsx

@@ -0,0 +1,27 @@
+// 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, AxisLeft} from "../../../args/core/components/AxisLeft.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Components/AxisLeft",
+  component: AxisLeft,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Shorthand method for creating an axis where the ticks are drawn to the left of the vertical domain path. Extends all functionality of the base [Axis](#Axis) class.",
+      },
+    },
+  }
+};
+
+const Template = (args) => <AxisLeft 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.
+

package/packages/core/components/AxisRight.stories.jsx

@@ -0,0 +1,27 @@
+// 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, AxisRight} from "../../../args/core/components/AxisRight.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Components/AxisRight",
+  component: AxisRight,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Shorthand method for creating an axis where the ticks are drawn to the right of the vertical domain path. Extends all functionality of the base [Axis](#Axis) class.",
+      },
+    },
+  }
+};
+
+const Template = (args) => <AxisRight 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.
+

package/packages/core/components/AxisTop.stories.jsx

@@ -0,0 +1,27 @@
+// 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, AxisTop} from "../../../args/core/components/AxisTop.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Components/AxisTop",
+  component: AxisTop,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Shorthand method for creating an axis where the ticks are drawn above the vertical domain path. Extends all functionality of the base [Axis](#Axis) class.",
+      },
+    },
+  }
+};
+
+const Template = (args) => <AxisTop 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.
+

package/packages/core/components/ColorScale.stories.jsx

@@ -0,0 +1,44 @@
+// 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, ColorScale} from "../../../args/core/components/ColorScale.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Components/ColorScale",
+  component: ColorScale,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Creates an SVG scale based on an array of data. If *data* is specified, immediately draws based on the specified array and returns the current class instance. If *data* is not specified on instantiation, it can be passed/updated after instantiation using the [data](#shape.data) method.",
+      },
+    },
+  }
+};
+
+const Template = (args) => <ColorScale 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 LinearScale = Template.bind({});
+LinearScale.args = {
+  data: [
+    {value: 200},
+    {value: 1000},
+    {value: 2000},
+    {value: 2010},
+    {value: 2020},
+    {value: 2030},
+    {value: 2040},
+    {value: 2100},
+    {value: 6400}
+  ],
+  height: 100,
+  width: 500
+};
+LinearScale.parameters = {controls: {include: []}};

package/packages/core/components/Legend.stories.jsx

@@ -0,0 +1,49 @@
+// 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, Legend} from "../../../args/core/components/Legend.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Components/Legend",
+  component: Legend,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Creates an SVG scale based on an array of data. If *data* is specified, immediately draws based on the specified array and returns the current class instance. If *data* is not specified on instantiation, it can be passed/updated after instantiation using the [data](#shape.data) method.",
+      },
+    },
+  }
+};
+
+const Template = (args) => <Legend 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: [
+    {color: "red", id: "alpha"},
+    {color: "orange", id: "beta"},
+    {color: "green", id: "gamma"},
+    {color: "blue", id: "delta"},
+    {color: "purple", id: "epsilon"}
+  ],
+  label: d => d.id,
+  shapeConfig: {
+    fill: d => d.color,
+    r: 10,
+    height: 20,
+    width: 20
+  },
+  shape: "Rect",
+  title: "A Basic Legend",
+  height: 100,
+  width: 500,
+};
+BasicExample.parameters = {controls: {include: ["shape", "title"]}};

package/packages/core/components/TextBox.stories.jsx

@@ -0,0 +1,222 @@
+// 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, TextBox} from "../../../args/core/components/TextBox.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Components/TextBox",
+  component: TextBox,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Creates a wrapped text box for each point in an array of data. See [this example](https://d3plus.org/examples/d3plus-text/getting-started/) for help getting started using the TextBox class.",
+      },
+    },
+  }
+};
+
+const Template = (args) => <TextBox 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: [
+    {text: "Here is text rendered in <i>SVG</i> that is <u>wrapped</u> and contains <b>HTML</b> tags."},
+    {text: "这是句子 2。即使包装器中没有空格，它也有效！"},
+    {text: "၎င်းသည် ချိတ်ဆက်ထားသော စာလုံးများပင်လျှင် ဘာသာစကားအများစုတွင် အလုပ်လုပ်သည်။"},
+  ],
+  duration: 500,
+  fontSize: 16,
+  height: 200,
+  lineHeight: 18,
+  text: d => d.text,
+  width: 200,
+  x: (d, i) => i * (200 + 50)
+};
+BasicExample.parameters = {controls: {include: ["fontSize", "lineHeight", "width"]}};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

package/packages/core/components/Timeline.stories.jsx

@@ -0,0 +1,37 @@
+// 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, Timeline} from "../../../args/core/components/Timeline.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Components/Timeline",
+  component: Timeline,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "",
+      },
+    },
+  }
+};
+
+const Template = (args) => <Timeline 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 = {
+  align: "start",
+  brushing: false,
+  domain: [2012, 2020],
+  height: 100,
+  playButton: true,
+  width: 400
+};
+BasicExample.parameters = {controls: {include: ["domain", "playButton"]}};

package/packages/core/components/Tooltip.stories.jsx

@@ -0,0 +1,40 @@
+// 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, Tooltip} from "../../../args/core/components/Tooltip.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Components/Tooltip",
+  component: Tooltip,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Creates HTML tooltips in the body of a webpage.",
+      },
+    },
+  }
+};
+
+const Template = (args) => <Tooltip 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: [
+//     {"title": "D3plus Tooltip", "body": "Check out this cool table:", "position": "mouse", "label": "Position"}
+//   ],
+//   thead: ["Axis", d => d.label],
+//   tbody: [
+//     ["x", d => d.x],
+//     ["y", d => d.y]
+//   ],
+//   position: d => [0, 0]
+// };
+// BasicExample.parameters = {controls: {include: ["footer"]}};

package/packages/core/shapes/Area.stories.jsx

@@ -0,0 +1,27 @@
+// 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, Area} from "../../../args/core/shapes/Area.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Shapes/Area",
+  component: Area,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Creates SVG areas based on an array of data.",
+      },
+    },
+  }
+};
+
+const Template = (args) => <Area 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.
+