Notes on creating a Bar graph
Ideally it would be best to have a center of gravity at 0 and then have additions shoot upwards and deletions shoot downwards. However it requires one to handle cases where there is no deletions for instance. And also should the up/down max value be uniform or? A simpler approach is to just account for additions. Simple design that is very similar to how the Graph is setup.
5 vertical indicators (amount of addition deletions)
similar design as Graph (0,1,2,3,4,5,6)
7 Horizontal indicators (days per week)
m,t,w,t,f,s,s Horizontal Gradient colors or?
How do you handle values that are near 0 or near max?
basically if a time-unit has value, you render the bar. If its lower than a circle height, then render circle hight. Just clamp the height applied to the bar with a min and max value before you render it. If the value is equal to 0. You don’t render the bar-graph
Handle gestures just like you did in the GitSyncGraph. But also add a debug layer that shows the points of touch. Similar to how Framer does it.
- This feature needs research.
- How do you find coordinates to touch points, how do you then position these relative to the NSView.
- Might need some ratio calculations to get the right look and feel.
- When you transition from one time-range to another each BarGraph animates with an EaseInOut tween.
- If the value becomes 0, then you init an alpha tween that lasts 0.2 sec and end with alpha:0,
- If the GraphBar is alpha: then you tween the alpha to 1 over 0.2 sec and at the same time animate the GraphBar to it’s destiny.
- We never remove or hide GraphBar’s they are simply re-used
use css to style the BarGraph Elements. Solid fill that has 7 different colors. Staring from blue on day:1 and blends to red on day 7. Use A gradient (because it can hold 2 colors) in css and then just use
NSColor.color1.blend(fraction:i/7,to:color2) Or use darkblue bg and purple bars that increase in alpha if the y-Value is high etc
let graphContainer = addSubView(Container(width,height,self,"graph")) let graph = graphContainer.addSubView(BarGraph(200,200/*,4*/,graphContainer)) _ = graph
Nice interactive inspiration:
https://github.com/twicketapp/TwicketSegmentedControl https://github.com/sasojadrovski/SJFluidSegmentedControl https://github.com/Yalantis/Persei https://github.com/BohdanOrlov/BouncyPageViewController https://github.com/cjwirth/awesome-ios-ui https://github.com/TBXark/TKSwitcherCollection