@d3plus/docs 3.0.0-alpha.3

package/packages/core/charts/Pack.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, Pack} from "../../../args/core/charts/Pack.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Charts/Pack",
+  component: Pack,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Uses the [d3 pack layout](https://github.com/d3/d3-hierarchy#pack) to creates Circle Packing chart based on an array of data.",
+      },
+    },
+  }
+};
+
+const Template = (args) => <Pack 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", 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: funcify(d => d.value, "d => d.value")
+};
+BasicExample.parameters = {controls: {include: ["sum"]}};

package/packages/core/charts/Pie.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, Pie} from "../../../args/core/charts/Pie.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Charts/Pie",
+  component: Pie,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Uses the [d3 pie layout](https://github.com/d3/d3-shape#pies) to creates SVG arcs based on an array of data.",
+      },
+    },
+  }
+};
+
+const Template = (args) => <Pie 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: [
+    {Type: "Apple pie", Percentage: 30},
+    {Type: "Butter pie", Percentage: 20},
+    {Type: "Cherry pie", Percentage: 25},
+    {Type: "Lemon pie", Percentage: 15},
+    {Type: "Sugar pie", Percentage: 10}
+  ],
+  groupBy: "Type",
+  value: "Percentage"
+};
+BasicExample.parameters = {controls: {include: ["value"]}};

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

@@ -0,0 +1,180 @@
+// 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, Plot} from "../../../args/core/charts/Plot.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Charts/Plot",
+  component: Plot,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Creates an x/y plot based on an array of data.",
+      },
+    },
+  }
+};
+
+const Template = (args) => <Plot 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", x: 4, y: 7},
+    {id: "beta", x: 5, y: 2},
+    {id: "gamma", x: 6, y: 13},
+    {id: "delta", x: 2, y: 11},
+    {id: "epsilon", x: 5, y: 5},
+    {id: "zeta", x: 3, y: 4},
+    {id: "eta", x: 2.5, y: 6},
+    {id: "theta", x: 5.5, y: 9}
+  ],
+  groupBy: "id",
+  x: "x",
+  y: "y"
+};
+BasicExample.parameters = {controls: {include: ["x", "y"]}};
+
+export const BubbleChart = Template.bind({});
+BubbleChart.args = {
+  data: [
+    {id: "alpha", x: 4, y: 7, value: 240},
+    {id: "beta", x: 5, y: 2, value: 120},
+    {id: "gamma", x: 6, y: 13, value: 180}
+  ],
+  groupBy: "id",
+  size: "value",
+  sizeMax: 90,
+  sizeMin: 20,
+  x: "x",
+  y: "y"
+};
+BubbleChart.parameters = {controls: {include: ["size", "sizeMax", "sizeMin"]}};
+
+export const ShapeBackgroundImages = Template.bind({});
+ShapeBackgroundImages.args = {
+  data: "https://oec.world/api/gdp/eci?Year=2019&x=OEC.ECI&y=NY.GDP.MKTP.CD",
+  groupBy: "Country",
+  shapeConfig: {
+    Circle: {
+      backgroundImage: funcify(
+        d => `https://oec.world/images/icons/country/country_${d["Country ID"].slice(2,5)}_circle.png`,
+        "d => `https://oec.world/images/icons/country/country_${d['Country ID'].slice(2,5)}_circle.png`"
+      ),
+      label: funcify(
+        () => "",
+        "() => ''"
+      )
+    }
+  },
+  size: "Trade Value",
+  sizeMax: 50,
+  x: "ECI",
+  y: "Measure"
+};
+ShapeBackgroundImages.parameters = {controls: {include: ["shapeConfig", "size", "sizeMax"]}};
+
+export const TrendlineUsingAnnotations = Template.bind()
+TrendlineUsingAnnotations.args = {
+  data: "https://datausa.io/api/data?measures=Adult%20Obesity,Average%20Commute%20Time&drilldowns=State&year=2022",
+  dataFormat: funcify(
+    resp => resp.data.filter(d => d["ID State"] !== "04000US72"),
+    'resp => resp.data.filter(d => d["ID State"] !== "04000US72")'
+  ),
+  groupBy: "State",
+  annotations: [
+    {
+      data: [
+        {
+          "id": "Trend",
+          "x": 16,
+          "y": 0.4
+        },
+        {
+          "id": "Trend",
+          "x": 34,
+          "y": 0.25
+        },
+        {
+          "id": "Baseline",
+          "x": 16,
+          "y": 0.3
+        },
+        {
+          "id": "Baseline",
+          "x": 34,
+          "y": 0.3
+        }
+      ],
+      shape: "Line",
+      stroke: funcify(
+        d => d["id"] === "Trend" ? "#6A994E" : "#c3c3c3",
+        "d => d['id'] === 'Trend' ? '#6A994E' : '#c3c3c3'"
+      ),
+      strokeDasharray: "10",
+      strokeWidth: 2
+    }
+  ],
+  x: "Average Commute Time",
+  y: "Adult Obesity"
+};
+TrendlineUsingAnnotations.parameters = {controls: {include: ["annotations"]}};
+
+export const MultipleShapes = Template.bind({});
+MultipleShapes.args = {
+  data: [
+    {"value": 100, "weight": .45,  "name": "alpha"},
+    {"value": 70,  "weight": .60,  "name": "beta"},
+    {"value": 40,  "weight": -.2,  "name": "gamma"},
+    {"value": 15,  "weight": .1,   "name": "delta"},
+    {"value": 5,   "weight": -.43, "name": "epsilon"},
+    {"value": 1,   "weight": 0,    "name": "zeta"}
+  ],
+  groupBy: "name",
+  shape: funcify(
+    d => (d.name === "alpha" || d.name === "delta" || d.name === "epsilon") ? "Rect" : "Circle",
+    `d => (d.name === "alpha" || d.name === "delta" || d.name === "epsilon") ? "Rect" : "Circle"`
+  ),
+  size: "value",
+  x: "value",
+  y: "weight"
+};
+MultipleShapes.parameters = {controls: {include: ["shape"]}};
+
+export const SortingShapes = Template.bind({});
+SortingShapes.args = {
+  data: [
+    {id: "alpha", time: 4, value: 240},
+    {id: "beta", time: 5, value: 120},
+    {id: "gamma", time: 6, value: 180},
+    {id: "delta", time: 4, value: 240},
+    {id: "delta", time: 5, value: 120},
+    {id: "delta", time: 6, value: 180}
+  ],
+  groupBy: "id",
+  shape: funcify(
+    d => d.id === "delta" ? "Line" : "Circle",
+    `d => d.id === "delta" ? "Line" : "Circle"`
+  ),
+  shapeConfig: {
+    Line: {
+      strokeLinecap: "round",
+      strokeWidth: 5
+    }
+  },
+  shapeSort: funcify(
+    (a, b) => ["Circle", "Line"].indexOf(b) - ["Circle", "Line"].indexOf(a),
+    "(a, b) => ['Circle', 'Line'].indexOf(b) - ['Circle', 'Line'].indexOf(a)"),
+  sizeMin: 20,
+  x: "time",
+  y: "value"
+};
+SortingShapes.parameters = {controls: {include: ["shapeSort"]}};

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

@@ -0,0 +1,60 @@
+// 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, Priestley} from "../../../args/core/charts/Priestley.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Charts/Priestley",
+  component: Priestley,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Creates a priestley timeline based on an array of data.",
+      },
+    },
+  }
+};
+
+const Template = (args) => <Priestley 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: [
+    {element: "alpha",   birth: 2004, death: 2007},
+    {element: "epsilon", birth: 2007, death: 2012},
+    {element: "beta",    birth: 2005, death: 2010}
+  ],
+  end: "death",
+  groupBy: "element",
+  start: "birth"
+};
+BasicExample.parameters = {controls: {include: ["end", "start"]}};
+
+export const GroupingBarsIntoLanes = Template.bind({});
+GroupingBarsIntoLanes.args = {
+  data: [
+    {parent: "Group 1", id: "alpha",   start: 2004, end: 2007},
+    {parent: "Group 2", id: "epsilon", start: 2007, end: 2012},
+    {parent: "Group 1", id: "beta",    start: 2005, end: 2010},
+    {parent: "Group 1", id: "gamma",   start: 2008, end: 2013},
+    {parent: "Group 2", id: "delta",   start: 2004, end: 2007}
+  ],
+  end: "death",
+  groupBy: ["parent", "id"],
+  shapeConfig: {
+    fill: funcify(
+      d => d.parent === "Group 1" ? "firebrick" : "cornflowerblue",
+      `d => d.parent === "Group 1" ? "firebrick" : "cornflowerblue"`
+    )
+  },
+  start: "birth"
+};
+GroupingBarsIntoLanes.parameters = {controls: {include: ["groupBy", "shapeConfig"]}};

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

@@ -0,0 +1,60 @@
+// 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, Radar} from "../../../args/core/charts/Radar.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Charts/Radar",
+  component: Radar,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Creates a radar visualization based on an array of data.",
+      },
+    },
+  }
+};
+
+const Template = (args) => <Radar 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: [
+    {element: "alpha",   birth: 2004, death: 2007},
+    {element: "epsilon", birth: 2007, death: 2012},
+    {element: "beta",    birth: 2005, death: 2010}
+  ],
+  end: "death",
+  groupBy: "element",
+  start: "birth"
+};
+BasicExample.parameters = {controls: {include: ["end", "start"]}};
+
+export const GroupingBarsIntoLanes = Template.bind({});
+GroupingBarsIntoLanes.args = {
+  data: [
+    {parent: "Group 1", id: "alpha",   start: 2004, end: 2007},
+    {parent: "Group 2", id: "epsilon", start: 2007, end: 2012},
+    {parent: "Group 1", id: "beta",    start: 2005, end: 2010},
+    {parent: "Group 1", id: "gamma",   start: 2008, end: 2013},
+    {parent: "Group 2", id: "delta",   start: 2004, end: 2007}
+  ],
+  end: "death",
+  groupBy: ["parent", "id"],
+  shapeConfig: {
+    fill: funcify(
+      d => d.parent === "Group 1" ? "firebrick" : "cornflowerblue",
+      `d => d.parent === "Group 1" ? "firebrick" : "cornflowerblue"`
+    )
+  },
+  start: "birth"
+};
+GroupingBarsIntoLanes.parameters = {controls: {include: ["groupBy", "shapeConfig"]}};

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

@@ -0,0 +1,36 @@
+// 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, RadialMatrix} from "../../../args/core/charts/RadialMatrix.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Charts/RadialMatrix",
+  component: RadialMatrix,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Creates a radial layout of a rows/columns Matrix of any dataset. See [this example](https://d3plus.org/examples/d3plus-matrix/radial-matrix/) for help getting started using the Matrix class.",
+      },
+    },
+  }
+};
+
+const Template = (args) => <RadialMatrix 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: "https://api.oec.world/tesseract/data.jsonrecords?cube=trade_i_baci_a_17&drilldowns=Year,Exporter+Continent,Importer+Continent&measures=Trade+Value&Year=2018",
+  groupBy: ["Exporter Continent", "Importer Continent"],
+  column: "Importer Continent",
+  row: "Exporter Continent",
+  colorScale: "Trade Value"
+};
+BasicExample.parameters = {controls: {include: ["column", "row"]}};

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

@@ -0,0 +1,41 @@
+// 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, Rings} from "../../../args/core/charts/Rings.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Charts/Rings",
+  component: Rings,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Creates a ring visualization based on a defined set of nodes and edges. [Click here](http://d3plus.org/examples/d3plus-network/simple-rings/) for help getting started using the Rings class.",
+      },
+    },
+  }
+};
+
+const Template = (args) => <Rings 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 = {
+  center: "alpha",
+  links: [
+    {source: "alpha", target: "beta"},
+    {source: "alpha", target: "gamma"},
+    {source: "beta", target: "delta"},
+    {source: "beta", target: "epsilon"},
+    {source: "zeta", target: "gamma"},
+    {source: "theta", target: "gamma"},
+    {source: "eta", target: "gamma"}
+  ]
+};
+BasicExample.parameters = {controls: {include: ["center", "links"]}};

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

@@ -0,0 +1,41 @@
+// 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, Sankey} from "../../../args/core/charts/Sankey.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Charts/Sankey",
+  component: Sankey,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Creates a sankey visualization based on a defined set of nodes and links. [Click here](http://d3plus.org/examples/d3plus-network/sankey-diagram/) for help getting started using the Sankey class.",
+      },
+    },
+  }
+};
+
+const Template = (args) => <Sankey 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 = {
+  center: "alpha",
+  links: [
+    {source: "alpha", target: "beta"},
+    {source: "alpha", target: "gamma"},
+    {source: "beta", target: "delta"},
+    {source: "beta", target: "epsilon"},
+    {source: "zeta", target: "gamma"},
+    {source: "theta", target: "gamma"},
+    {source: "eta", target: "gamma"}
+  ]
+};
+BasicExample.parameters = {controls: {include: ["center", "links"]}};

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

@@ -0,0 +1,107 @@
+// 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, StackedArea} from "../../../args/core/charts/StackedArea.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Charts/StackedArea",
+  component: StackedArea,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Creates a stacked area plot based on an array of data.",
+      },
+    },
+  }
+};
+
+const Template = (args) => <StackedArea 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", x: 4, y:  7},
+    {id: "alpha", x: 5, y: 25},
+    {id: "alpha", x: 6, y: 13},
+    {id: "beta",  x: 4, y: 17},
+    {id: "beta",  x: 5, y:  8},
+    {id: "beta",  x: 6, y: 13}
+  ],
+  groupBy: "id",
+  x: "x",
+  y: "y"
+};
+BasicExample.parameters = {controls: {include: ["x", "y"]}};
+
+export const HorizontalChart = Template.bind({});
+HorizontalChart.args = {
+  data: [
+    {id: "alpha", x:  7, y: 4},
+    {id: "alpha", x: 25, y: 5},
+    {id: "alpha", x: 13, y: 6},
+    {id: "beta",  x: 17, y: 4},
+    {id: "beta",  x:  8, y: 5},
+    {id: "beta",  x: 13, y: 6}
+  ],
+  discrete: "y",
+  groupBy: "id",
+  x: "x",
+  y: "y"
+};
+HorizontalChart.parameters = {controls: {include: ["discrete"]}};
+
+export const SharePercentages = Template.bind({});
+SharePercentages.args = {
+  data: [
+    {id: "alpha", x: 4, y:  7},
+    {id: "alpha", x: 5, y: 25},
+    {id: "alpha", x: 6, y: 13},
+    {id: "beta",  x: 4, y: 17},
+    {id: "beta",  x: 5, y:  8},
+    {id: "beta",  x: 6, y: 13},
+    {id: "gamma", x: 4, y: 10},
+    {id: "gamma", x: 5, y: 18},
+    {id: "gamma", x: 6, y:  5}
+  ],
+  groupBy: "id",
+  stackOffset: "expand",
+  x: "x",
+  y: "y",
+  yConfig: {
+    tickFormat: funcify(
+      d => `${formatAbbreviate(d * 100)}%`,
+      "d => `${formatAbbreviate(d * 100)}%`")
+  }
+};
+SharePercentages.parameters = {controls: {include: ["stackOffset", "yConfig"]}};
+
+export const SortingAreas = Template.bind({});
+SortingAreas.args = {
+  data: [
+    {id: "alpha", x: 4, y:  7},
+    {id: "alpha", x: 5, y: 25},
+    {id: "alpha", x: 6, y: 13},
+    {id: "beta",  x: 4, y: 17},
+    {id: "beta",  x: 5, y:  8},
+    {id: "beta",  x: 6, y: 13},
+    {id: "gamma", x: 4, y: 10},
+    {id: "gamma", x: 5, y: 18},
+    {id: "gamma", x: 6, y:  5},
+    {id: "delta", x: 4, y:  8},
+    {id: "delta", x: 5, y: 12},
+    {id: "delta", x: 6, y:  7}
+  ],
+  groupBy: "id",
+  stackOrder: ["alpha", "gamma", "delta", "beta"],
+  x: "x",
+  y: "y"
+};
+SortingAreas.parameters = {controls: {include: ["stackOrder"]}};

package/packages/core/charts/Tree.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, Tree} from "../../../args/core/charts/Tree.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Charts/Tree",
+  component: Tree,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Uses d3's [tree layout](https://github.com/d3/d3-hierarchy#tree) to create a tidy tree chart based on an array of data.",
+      },
+    },
+  }
+};
+
+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.
+