Examples: Add pie and donut charts

[louismaximepiton]

Note: Please transform - [ ] into - (NA) in the description when things are not applicable

Related issues

NA

Description

Added an example showing a pie and a donut charts.

Questions still to be answered:

• Do we make several pages for these two kinds of charts or only one is enough ? If not, remove the ods-donut-charts.png.
• Not quite sure of the values I gave inside the examples. Need to be discussed or is it fine as a first draft ?
• Do we need to update getThemeOptions accordingly ? For example we don't have axis on this kind of chart.

Motivation & Context

These type of charts are considered as basic and are missing inside the doc.

Types of change

• New feature (non-breaking change which adds functionality)

Test checklist

Please check that the following tests projects are still working:

• docs/examples
• test/angular-ngx-echarts
• test/angular-tour-of-heroes
• test/html
• test/react
• test/vue
• test/examples/bar-line-chart
• test/examples/single-line-chart
• test/examples/timeseries-chart

[netlify]

✅ Deploy Preview for ods-charts ready!

Name	Link
🔨 Latest commit	6ee3008
🔍 Latest deploy log	https://app.netlify.com/sites/ods-charts/deploys/66a3443d0868c80008fefd9c
😎 Deploy Preview	https://deploy-preview-88--ods-charts.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[jacques-lebourgeois]

Hi, I push 3 commits, 2 suggestion and one enhancement.

Available to discuss about them :)

[louismaximepiton]

I feel right with your changes, the display is great and as an alpha version it's fine to add some support to legend I think

[julien-deramond]

#158 has been merged, please apply the same modifications here.

[jacques-lebourgeois]

#158 has been merged, please apply the same modifications here

Commited

[louismaximepiton]

Removed the work you did @jacques-lebourgeois since it'll be embedded in #242 and following PRs. I think it's ready for review.

Note: I've added the Orange legend look for now, but it'll have to be removed if the #242 is merged before or if the #242 is merged after, think about reverting 780f2cb

[jacques-lebourgeois]

I just push a commit for suggestion if you agree

[julien-deramond]

Good job with this addition @louismaximepiton
Few tiny things to change before accepting.
Please check #300 to see if there are other changes to do here while rebasing the branch ;)

[julien-deramond]

LGTM! Let's wait for the light design review, and then we can merge/release 🚀

[Franco-Riccitelli]

Here are some design review comments for the Pie chart and Donut chart.

• The use of the "Default" colours looks good to me. I can see these are based on the ODS Categorical colours for data displays.
• The spacing between each of the segments in the charts is also very good.
• The padding on the tooltips is quite large. For the Donut this can sometimes result in the tooltip overlapping the value in the centre of the Donut (when the chart is reduced in size). I suggest trying to reduce the padding in the tooltip by about half and also reducing the vertical space between the text labels in the tooltip by about a half.
• When the charts are reduced in size, I also think the font size can be reduced for the legend and the text in the tooltip. I suggest trying 14px font size.
• The legend should align with the title and subtitle at the top. At the moment, the legend is positioned slightly to the right.
• The wrapping of the legend works well.

[julien-deramond]

Thanks for the design review @Franco-Riccitelli 🙏

The padding on the tooltips is quite large.
I suggest trying to reduce the padding in the tooltip by about half and also reducing the vertical space between the text labels in the tooltip by about a half.

The padding on the tooltips follows the standard from ODS. We did not initially notice the different specification hidden at https://design.orange.com/0c1af118d/p/714762-legends/t/page-714762-48288420-5. Should we adhere to this specification instead for all charts? If so, this adjustment can be addressed in a separate PR, as it impacts the global rendering for all charts.

When the charts are reduced in size, I also think the font size can be reduced for the legend and the text in the tooltip. I suggest trying 14px font size.

We can implement this change in separate PRs since it affects the global rendering for all charts:

• One PR for adjusting the label font size to 14px at small breakpoints
• Another PR (linked to the previous feedback) for tooltip rendering adjustments

However, we need to determine the breakpoint at which the font size changes to 14px. Should this adjustment occur from tablet rendering to mobile (medium)?

The legend should align with the title and subtitle at the top. At the moment, the legend is positioned slightly to the right.

According to the ODS Design guidelines, the legend should be vertical and positioned on the right-hand side of the donut/pie chart. This change is not included in the current PR because it depends on the merge of another PR (PR #244). You can preview the updates in this deployment.
Do you confirm this must be positioned on the right-hand side of the donut/pie chart?

[Franco-Riccitelli]

In response to the questions to my review of the Donut and Pie charts:

The padding for the tooltip should be reduced for all chart usage. I understand this will be a separate PR as this impacts the global rendering, which totally makes sense.

Font size change: I think the 14px font change should occur from the tablet to mobile breakpoints.

Legend positioning: The legend positioning at the bottom of the Pie and Donut chart works well and should remain at the bottom. The only slight adjustment is the alignment of the Legend to the Title and Subtitle (see attached example). Regarding the guidelines, I will update the Data Display Guidelines to show that the legend can be positioned at the bottom of Donut and Pie charts.

[julien-deramond]

Thanks a lot for your feedback, @Franco-Riccitelli.
We've addressed the specific points related to the donut/pie charts in this PR. The more general feedback will be managed separately. We plan to create dedicated issues for those and implement the modifications through separate PRs.

[nbossard]

👏 good news