This is my entry in Phoenix Phrenzy, showing off what Phoenix and LiveView can do.
A Pie Chart Maker with several predefined styles and an option to create custom styles for the items.
Pie slices are generated as SVG paths.
Edit the input and the application will automatically recalculate the percents and update the chart.
- basic: 36 predefined basic colors.
- funky: Random selection of funky colors.
- pie: :-) Items use specific styles predefined in .css.
Item's name == name of a .css class.
So you can easily create custom styles for the items. (Edit /assets/css/app.css file. Add the custom classes at the end of the file, after the default ones, for this to work.)
If there is no predefined style for the item, it will use one of the basic colors.
Currently there are a few predefined styles: strawberry, banana, blueberry, kiwi etc.
They use SVG patterns, for example:
.strawberry {fill: url("#strawberry");}
The patterns are defined in /templates/page/piechart_patterns.html.leex.
To start your Phoenix server:
- Install dependencies with
mix deps.get - Install Node.js dependencies with
cd assets && npm install - Start Phoenix endpoint with
mix phx.server
Now you can visit localhost:4000 from your browser.
Ready to run in production? Please check our deployment guides.
- Official website: http://www.phoenixframework.org/
- Guides: https://hexdocs.pm/phoenix/overview.html
- Docs: https://hexdocs.pm/phoenix
- Mailing list: http://groups.google.com/group/phoenix-talk
- Source: https://github.com/phoenixframework/phoenix