feat(chart): add new component #3240
Conversation
Kiarokh
force-pushed
the
chart-grid-based
branch
from
0674676 to
41ef810
Compare
|
Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-3240/ |
Kiarokh
changed the title
Kiarokh
force-pushed
the
chart-grid-based
branch
3 times, most recently
from
505edac to
955f046
Compare
Kiarokh
force-pushed
the
chart-grid-based
branch
3 times, most recently
from
4862649 to
8838fd5
Compare
| * When not provided, the sum of all values in the items will be considered as the range. | ||
| */ | ||
| @Prop({ reflect: true }) | ||
| public maxValue?: number; |
There was a problem hiding this comment.
minValue could be useful as well, it looks like it uses 0 now which might not always be good to display the data correctly
There was a problem hiding this comment.
We could also bake it into a single prop with a tuple if we want, e.g.
public valueRange?: [number | null, number | null];There was a problem hiding this comment.
I didn't fix this, we can add it later if we need it
| | 'pie' | ||
| | 'ring' | ||
| | 'scatter' | ||
| | 'stacked-bar' = 'stacked-bar'; |
There was a problem hiding this comment.
When I hear "stacked bar" I think of something like this
Our example here only has one bar though so it seems more like a pie chart that has been flattened 😄 Perhaps we should call it something else unless we add support for multiple stacked bars
There was a problem hiding this comment.
I'd say these are chart-sets and require sending multiple arrays of items into the component. We should either make another component and call it for instance chart-set, or move the current one into a private sub-component. I don't know.
Currently the consumer can make these chart-sets on their own, knowing a little CSS and having multiple limel-charts. But if we wanna handle them, we can of course. We (or the consumer) should just make sure that the min and max values in the datasets are the same, and the data has the same range. This means we need to add the minValue prop too, otherwise for those charts with X and Y axis, we will get the zero-line in different locations.
Also, such chart-sets (e.g. area or lines or bars) will be overlayed on each other. It means we will absolutely position each chart on the previous chart. There is no way in normal CSS and HTML to hover on the layers which are placed below the top-most layer. (we already have this issue with the pie chart, you can't hover the items since they are all layers on top of each other). This will be a downside of having such charts. We need to solve it then by proviing an interactive "Legend" where items inside the chart can be highlighted if you hover on their equivalents inside the legend.
Kiarokh
force-pushed
the
chart-grid-based
branch
2 times, most recently
from
1e7f296 to
d7044c3
Compare
Kiarokh
force-pushed
the
chart-grid-based
branch
from
1be9bfa to
70b1e62
Compare
while keeping the hidden element accessible to assistive technologies
Kiarokh
force-pushed
the
chart-grid-based
branch
from
70b1e62 to
0d2d11e
Compare
|
🎉 This PR is included in version 37.68.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
while keeping the hidden element accessible to assistive technologies
fix https://github.com/Lundalogik/hack-tuesday/issues/361
Review:
Browsers tested:
(Check any that applies, it's ok to leave boxes unchecked if testing something didn't seem relevant.)
Windows:
Linux:
macOS:
Mobile: