New component - PieChart #3470
New component - PieChart #3470
Conversation
|
@nitzanyiz |
|
@ethanshar I think I need to rethink the api. When I started to use the component I got into a few problems with the api. Lets discuss this. |
demo/src/screens/MenuStructure.js
Outdated
| @@ -44,7 +44,8 @@ export const navigationData = { | |||
| screen: 'unicorn.components.SharedTransitionScreen' | |||
| }, | |||
| {title: 'Stack Aggregator', tags: 'stack aggregator', screen: 'unicorn.components.StackAggregatorScreen'}, | |||
| {title: 'Marquee', tags: 'sliding text', screen: 'unicorn.components.MarqueeScreen'} | |||
| {title: 'Marquee', tags: 'sliding text', screen: 'unicorn.components.MarqueeScreen'}, | |||
| {title: 'PieChart', tags: 'pie chart data', screen: 'unicorn.components.PieChartScreen'} | |||
There was a problem hiding this comment.
Let's put this new component under Charts category, we don't have this category in public yet but it does exist in private
src/index.ts
Outdated
| @@ -82,6 +82,7 @@ export {default as HapticService, HapticType} from './services/HapticService'; | |||
| export {default as Hint, HintProps} from './components/hint'; | |||
| export {default as Icon, IconProps} from './components/icon'; | |||
| export {default as Image, ImageProps} from './components/image'; | |||
| export {default as PieChart, PieChartSegmentProps} from './components/piechart'; | |||
There was a problem hiding this comment.
try keeping the exports order alphabetically
src/components/piechart/index.tsx
Outdated
| const total = useMemo(() => { | ||
| return _.sum(segments.map(s => s.percentage)); | ||
| }, [segments]); | ||
| if (total !== 100) { |
There was a problem hiding this comment.
I wonder if we should allow a total smaller than 100
I saw partial pie charts before, maybe users would want that. We can have the missing part as blank
There was a problem hiding this comment.
This actually works just by removing the error. Changed.
| const DEFAULT_DIVIDER_WIDTH = 4; | ||
| const DEFAULT_PADDING = 0; | ||
|
|
||
| const PartialCircle = (props: PartialCircleProps) => { |
There was a problem hiding this comment.
I find Segment or PieSegment a better name for this component, WDYT?
There was a problem hiding this comment.
I think PieSegment is more clear. I'll change.
| padding?: number; | ||
| }; | ||
|
|
||
| const DEFAULT_DIVIDER_COLOR = '#FFFFFF'; |
There was a problem hiding this comment.
I suggest using our Colors.$backgroundDefault here so in dark mode it won't stay white but use the default background color
There was a problem hiding this comment.
Is it ok to set it in the global scope of the file or should it be at the component render? my meaning is using const DEFAULT_DIVIDER_COLOR = Colors.$backgroundDefault; inside the component and not out side of it.
src/components/piechart/index.tsx
Outdated
|
|
||
| export type PieChartProps = { | ||
| segments: PieChartSegmentProps[]; | ||
| size?: number; |
There was a problem hiding this comment.
consider adding a defaultSegmentProps where the user can control default UI for all segments like the divider color and width
There was a problem hiding this comment.
Added for the border width and color as you suggested.
src/components/piechart/index.tsx
Outdated
There was a problem hiding this comment.
Fix folder name to pieChart
There was a problem hiding this comment.
Since you are using an optional dependency it's possible the user won't have it installed, what we usually do is warn the user so they'll know to install it when using this component
moreover don't render the component if it's not installed, otherwise it will throw the user an error
You can see a reference for this behavior in our Card component that depends on blurView dep
|
@ethanshar , I made all the changes and added some to the api (border width and color). Also I added the api json. |
Description
Added a new component PieChart. The component gets segments which is an array of percentages to that each segment of the pie should cover. Each segment is a percentage representing the percentage of the pie to cover and a color for the pie segment.
Changelog
⭐ PieChart - New Component ⭐
Additional info
MADS-3418