coreyflynn / jubilation Goto Github PK

Basic description of Jubilation's goals and prior art

Instead of requiring clients to either use the default theme or create an entire theme of their own, allow them to pass an arbitrary object and merge it with the default theme.

• should be controlled through the axisLine prop passed to axis components
• should span the whole width or height of the graph (computed from xScale and yScale from context, respectively)
• should be drawn with a Line component built (see #4)

index.html deserves an instance of the <Line> component.

If you open the examples page and let it run while observing the Chrome Task Manager, you can watch the tab's memory footprint grow, unbounded.

Rather than the data and all tick marks updating simultaneously, the top tick on the Y-Axis only animates after all other animations are complete.

For vertical bar charts, we are going to want to rotate labels under the bars in the graph when space is tight so they don't overlap.

• create release tag
• publish to NPM

When putting labels on horizontal bar charts, we should be able to compute if the labels will run off the left side of the chart. If they will, the xRange of the chart context should be updated to accommodate the longest label in the chart

Offer a pleasant entry point to Jubilation by standing up the examples page as a GitHub Page.

It remains the only way to interact with the app short of building it locally

contribution guide including local dev setup

• create an examples bundle
• create an index.html for the repo that demonstrates a basic and animated scatter plot
• create a gh-pages branch to host the example

On the examples page, editing the "numTicks" field for either axis works, except on re-render, the ticks are all squished under the 100 mark, instead of being spread out.

should be a stateless component that takes x1, y1, x2, y2 in as props and renders an SVG line element with any additional props set on the output line.

• The line should use xScale and yScale from the passed in context or the default context if one is not given
• The line should default its stroke to the theme.labelStyle.fill color taken from either a passed in JubilationContext or the default context if one is not given
• The line should be wrapped in an Animation component.

See https://github.com/coreyflynn/jubilation/blob/master/src/jubilation-point/index.jsx for a similar component that implements an SVG circle.
See the SVG line docs at https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line for reference.

• should be controlled through the tickLines prop passed to axis components
• should span the whole width or height of the graph (computed from xScale and yScale from context, respectively)
• should be drawn with a Line component built (see #4)