1.4.2 • Published 6 years ago
cell-plot v1.4.2
cell-plot
React components for a plottable coordinate plane built with responsive Flexbox cells.
Details
CellPlot
: The main (default) export is a block-level component that renders something like graphing paper for plotting children components. It uses Flexbox to frame out a collection of clickable cells with borders and labels.Rectangle
: Must be rendered as a descendant ofCellPlot
. Wrap this around your custom plottable components to place them within the frame using responsive, percent-based positioning and dimensions.PlotConsumerProps
: CellPlot uses React Context to provideyAt
andxAt
utility functions for mapping from viewport coordinates into the coordinates of your plot. These are useful for handling DOM events like mouse movements.
Assumptions
- The x and y values proceed in regular increments.
- The x and y axes are numeric, but not continuous. They proceed in regular finite steps.
- Not every x and y value is labeled, but the quantity of x and y values are some multiple of the quantity of x and y labels.
- The lowest x and y values are in the top left corner.
Contributing
Bug reports and pull requests are welcome. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.