Draws a parallel sets chart: each group of records as one ribbon through the columns
A category of a parallel sets chart is a path with one name for each
column, as in an alluvial chart. Its value is the number of records in the
group. The nodes have the layout of an alluvial chart, which
Expresso.Element.Chart.Sankey.layout_frames/3 returns. Each category is
one ribbon from the first column to the last, so the user can see one
group in each column. A sankey adds the flows of each link, so it does not
show a group after the first node. Here, a ribbon is a chain of link
shapes.
The layout has these rules:
- Each ribbon has the color of its first node. Only the nodes of the first column have colors, in the order of the data, and the nodes of the other columns are gray.
- At each node, the ribbons have one stack, with the same place on the two sides of the node, so a ribbon does not break at a node.
- The stack of a node has the order of the nodes of each path, from the first column, so the ribbons of one first node stay together.
render/1 draws each series as a group with its ribbons. The nodes and
their labels show with the chart. Thus reveal true adds the ribbons of
one first node at each step. table/1 writes a row for
each path for a screen reader.
Summary
Functions
Make sure that each path has the same number of columns
Place the nodes and the ribbons of each frame of a parallel sets chart
Return the paths of the categories and the total value for each path
Draw the ribbons, the nodes and the labels of a parallel sets chart in its SVG
Return the headers and the rows of the table of a parallel sets chart: one row for each path, with the name of its node in each column and its value in each frame
Functions
Make sure that each path has the same number of columns
iex> Expresso.Element.Chart.ParallelSets.check([["A", "B"], ["B", "C"]], "/")
:ok
iex> Expresso.Element.Chart.ParallelSets.check([["A", "B"], ["B", "C", "D"]], "/")
{:error, "each category of a parallel sets chart names one node for each column, and \"B/C/D\" names 3 nodes, but the first category names 2"}@spec layout([[Expresso.Element.Chart.Sankey.key()]], [[[number()]]], number(), map()) :: [ %{ nodes: [map()], ribbons: [map()], node_width: pos_integer(), xs: [number()] } ]
Place the nodes and the ribbons of each frame of a parallel sets chart
frames holds the values of each frame, as one list of values for each
series. paths holds the path of each category. The nodes have the
layout of an alluvial chart. Each ribbon of a frame is a map with its
path, its color, its series and the d attribute of its shape.
@spec paths([String.t() | [String.t()]], [number()], String.t()) :: {[[Expresso.Element.Chart.Sankey.key()]], [number()]}
Return the paths of the categories and the total value for each path
Two categories with the same path add their values. The paths keep the order of their first category, and each node is the tuple of its column and its name.
iex> Expresso.Element.Chart.ParallelSets.paths([["A", "B"], "A/B", "B/B"], [2, 3, 4], "/")
{[[{0, "A"}, {1, "B"}], [{0, "B"}, {1, "B"}]], [5, 4]}@spec render(map()) :: Phoenix.HTML.safe()
Draw the ribbons, the nodes and the labels of a parallel sets chart in its SVG
The assigns are the assigns of Expresso.Element.Chart. A chart with
frames has one layer for each frame, as a sankey has.
Return the headers and the rows of the table of a parallel sets chart: one row for each path, with the name of its node in each column and its value in each frame