Create chart component plugins in angular by using D3 to support dynamic creation of dashboards and reports

[pandutibil]

Description

Develop Angular chart component plugins utilizing D3. The objective is to implement various chart components from the provided list. Each component should offer dynamic configuration options, enhancing customization for end users' efficiency.
Incorporate validation checks for the provided configuration and notify the user of any errors detected in the configuration input.

Following are the required chart component plugins:

• Line chart
• Bar chart

Following are the variations of bar chart

• Horizontal
• Vertical
• Multi bar

Line and bar (combined chart)

• Scatter plot
• Area chart
• Pie chart

Goals

Create and implement chart component plugins and also write unit test cases for the respective components

• Line chart
• Bar chart (variations - horizontal, vertical, multi bar chart)
• Line and bar (combined chart)
• Scatter plot
• Area chart
• Pie chart

Expected outcome

The chart component plugins will be developed with robust validation checks and will facilitate dynamic configuration options.

Acceptance Criteria:

1. Code Review: The code changes should be reviewed by one or more peers or team members to ensure quality, adherence to coding standards, and best practices.
2. Functional Requirements: The changes should fulfill the specified functional requirements and resolve the issue or task described in the associated ticket or task tracker.
3. Tests: New code should be covered by appropriate unit tests, and existing tests should pass without any failures. This may also include adding new test cases to cover the changes.
4. Compatibility: Ensure that the changes do not break existing functionality and are compatible with the target branch or environment.
5. Documentation: Update any relevant documentation, including code comments, README files, or user guides, to reflect the changes made.
6. Coding Standards: Ensure that the code follows the established coding guidelines and standards of the project.
7. No Merge Conflicts: The pull request should not have any conflicts with the target branch. Resolve any conflicts before merging.

Implementation Details:

Implement the required charts using D3 and ensure the chart components support customizations.

Product Name

cQube

Project Name

cQube

Organization Name

Tibil computer solutions Pvt. Ltd

Domain

UI Development

Category

UI

Tech Skills Needed

Angular, D3.js

Mentor(s)

Pandu Ankani

Complexity

High

[c4gt-community-support]

Hi!
Important Details - These following details are helpful for contributors to effectively identify and contribute to tickets.

• Sub-Category - Please mention the sub-category if any for the ticket

Please update the ticket

[Debatreya]

Hello @pandutibil ,
I would like to work on this issue. I need some more details to start work on this issue.
I have some doubts like :
I need details regarding the UI and type of data that are to be shown in charts.
Is there any existing design file? or I have to make a design.
and I am not getting this point: "notify the user of any errors detected in the configuration input." mentioned in the Issue description
So can you please describe these points?

[pandutibil]

Hello @Debatreya,

Good to hear that

1. UI was built using Angular framework and JSON response being used to provide data to the charts.
2. I've prepared design document for the new enhancements and here's the link
   https://docs.google.com/document/d/1ZQhp5w2JO26R2qbXmWlB0VQAUkK-Ym1lbrBAqRuD3Z4/edit?usp=sharing
3. "notify the user of any errors detected in the configuration input." means User have to provide the configuration file that contains the details about dashboard like title for the dashboard, reports, and in each report what charts should be rendered for the user.

Please share your email id, I'll schedule a meeting where we can discuss more on this

Thank You!

[Debatreya]

Thanks @pandutibil for describing.
Here is my email : debatreyadas@gmail.com

I will be free for the meeting anytime after today at 9pm or tomorrow.

Thank you.

[pandutibil]

Sure, Thanks!

[pandutibil]

Hi Debatreya,

Sorry, I was occupied with other things. When can we meet for our discussion?

Thank You.

[Debatreya]

Yeah fine.
Can we have the meet after 9 or 9:30 pm today?

[Smritisuresh]

@Shruti3004 @pandutibil Greetings, I have gone through the goals which to be achieved mentioned above and also I understood the problem statement. Can you please assign this ticket to me?

[pandutibil]

Hi Smriti,

Thank you for showing interest, please share your email address and availability. So, that I can schedule a meeting where we can discuss in detail

Thank you

[Smritisuresh]

@pandutibil Thank you for your quick response. My email id : smritisuresh0403@gmail.com . Besides can we have a meeting tomorrow anytime that suits you?

[pandutibil]

I'm available @Smritisuresh

Thank you

[Smritisuresh]

When can we have the meeting sir? Kindly let me know.

…

On Thu, 1 Feb, 2024, 2:47 pm pandutibil, ***@***.***> wrote: I'm available @Smritisuresh <https://github.com/Smritisuresh> Thank you — Reply to this email directly, view it on GitHub <#401 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXQ7FBNDQKP24CJPGYPEE33YRNMRNAVCNFSM6AAAAABBOB3AAOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMRQHA2TSMRUHA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[pandutibil]

When you'll be available?

[Smritisuresh]

Can we discuss this at 1pm?

…

On Thu, 1 Feb 2024 at 15:28, pandutibil ***@***.***> wrote: When you'll be available? — Reply to this email directly, view it on GitHub <#401 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXQ7FBMVGKOGAMBNU2JNIXDYRNRMFAVCNFSM6AAAAABBOB3AAOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMRQHE2DGNJUHE> . You are receiving this because you were mentioned.Message ID: ***@***.***>