Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
pandutibil opened this issue Jan 5, 2024 · 34 comments
Open

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

pandutibil opened this issue Jan 5, 2024 · 34 comments
Assignees
@psankhe28 @Smritisuresh
Labels
C4GT Community

Comments

@pandutibil
Copy link
Collaborator

pandutibil commented Jan 5, 2024 •
edited by Shruti3004
Loading

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 C4GT Community Support
Copy link

c4gt-community-support bot commented Jan 5, 2024 •
edited
Loading

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
Copy link

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
Copy link
Collaborator Author

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
Copy link

Debatreya commented Jan 25, 2024 •
edited
Loading

Thanks @pandutibil for describing.
Here is my email : [email protected]

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

Thank you.

@pandutibil
Copy link
Collaborator Author

Sure, Thanks!

@pandutibil
Copy link
Collaborator Author

Hi Debatreya,

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

Thank You.

@Debatreya
Copy link

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

@Smritisuresh
Copy link

@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
Copy link
Collaborator Author

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
Copy link

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

@pandutibil
Copy link
Collaborator Author

I'm available @Smritisuresh

Thank you

@Smritisuresh
Copy link

Smritisuresh commented Feb 1, 2024 via email

@pandutibil
Copy link
Collaborator Author

When you'll be available?

@Smritisuresh
Copy link

Smritisuresh commented Feb 1, 2024 via email

@SanjayRam07
Copy link

hello @pandutibil , can I work on this issue?
Could you please assign and mentor me?

@pandutibil
Copy link
Collaborator Author

pandutibil commented Feb 5, 2024 •
edited
Loading

Hi Sanjay,

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

@psankhe28
Copy link

Hello @pandutibil, I'm interested in taking up the available issue. I have experience with a similar project during C4GT 2023, and I'm confident in my ability to contribute. You can reach me via email at [email protected].

@pandutibil
Copy link
Collaborator Author

hello @pandutibil , can I work on this issue? Could you please assign and mentor me?

Hi Sanjay,

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

@pandutibil
Copy link
Collaborator Author

Hello @pandutibil, I'm interested in taking up the available issue. I have experience with a similar project during C4GT 2023, and I'm confident in my ability to contribute. You can reach me via email at [email protected].

Hi @psankhe28 ,

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

Thank you

@psankhe28
Copy link

Hello @pandutibil, I'm interested in taking up the available issue. I have experience with a similar project during C4GT 2023, and I'm confident in my ability to contribute. You can reach me via email at [email protected].

Hi @psankhe28 ,

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

Thank you

I am available anytime after 7 pm. If this timeframe doesn't work for you, please inform me of your availability, and I will provide mine for coordination.

@pandutibil
Copy link
Collaborator Author

@psankhe28 we can connect after 7 pm today. Is that fine?

@psankhe28
Copy link

@psankhe28 we can connect after 7 pm today. Is that fine?

Yes, it's fine.

@SanjayRam07
Copy link

hello @pandutibil , can I work on this issue? Could you please assign and mentor me?

Hi Sanjay,

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

Hello sir, I'm available tomorrow and Monday. If this issue is still available, kindly schedule the meet and update me.
Thanking you.

@SanjayRam07
Copy link

@pandutibil , here's my workflow:
Step 1: Project Setup and Dependencies

  1. Create Angular Project

  2. Install D3.js

Step 2: Implement Chart Components

  1. Line Chart

  2. Bar Chart

  3. Line and Bar (Combined Chart)

  4. Scatter Plot

  5. Area Chart

  6. Pie Chart

Step 3: Unit Testing

  1. Write Unit Test Cases
    • Create comprehensive unit test cases for each chart component.
    • Test dynamic configurations and ensure validation checks are effective.

Step 4: Validation Checks and Error Handling

  1. Implement Validation Checks
    • Add validation checks within each chart component to ensure correct input configurations.
    • Provide meaningful error messages for invalid configurations.

Step 5: Code Review and Documentation

  1. Code Review

    • Have one or more team members review the code changes for quality and adherence to coding standards.

  2. Documentation

    • Update code comments, README files, and any user guides to reflect the changes made.
    • Include details about customization options, validation checks, and usage instructions.

Step 6: Compatibility and No Merge Conflicts

  1. Compatibility Check

    • Ensure that the chart components do not break existing functionality in the cQube project.
    • Verify compatibility with the target environment.

  2. No Merge Conflicts

    • Resolve any merge conflicts with the target branch before merging.

Step 7: Final Testing and Deployment

  1. Final Testing and Deployment

@Sayan2908
Copy link

@pandutibil can I work on this issue

@pandutibil
Copy link
Collaborator Author

pandutibil commented Mar 28, 2024 •
edited
Loading

Hi All,

If anyone wants to contribute to this ticket can join the following link

C4GT-Discussion
Sunday, March 31 · 10:00 – 11:00am
Time zone: Asia/Kolkata
Google Meet joining info
Video call link: https://meet.google.com/eiv-ezxp-uvv
Or dial: ‪(US) +1 219-706-2477‬ PIN: ‪650 991 974‬#
More phone numbers: https://tel.meet/eiv-ezxp-uvv?pin=8441521377964

Thank You

@sagarkori143
Copy link

Hey @Smritisuresh @psankhe28
Can I take this if you guys are not working on this.
CC: @pandutibil

@psankhe28
Copy link

Hey @Smritisuresh @psankhe28 Can I take this if you guys are not working on this. CC: @pandutibil

I have completed the work already. Waiting for the review!

@Kushdapush
Copy link

Hey @Smritisuresh @psankhe28 , whats the status of this ticket? is it still open for contributions ?
CC : @pandutibil

@VedantKhairnar
Copy link

Hello @pandutibil
Can we pls assign this issue to @Kushdapush ? Thanks.

Meanwhile, @sagarkori143 @Kushdapush Pls raise the PR. Do give us an indication here that you have started working on it.
Thanks.

@Kushdapush
Copy link

@VedantKhairnar
I have some experience working with D3.js during my C4GT DMP 2024 contributions that can help us solve this issue quickly
CC : @pandutibil

@VedantKhairnar
Copy link

Great! Will you pls raise the PR @Kushdapush ?
We will assign the issue after the draft PR is raised.

@Kushdapush
Copy link

I'll try to raise one by the next Monday

@VedantKhairnar
Copy link

Hello @Kushdapush
Any update on the contribution?
Do let us know if you need any assistance.
Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@psankhe28 psankhe28

@Smritisuresh Smritisuresh

Labels
C4GT Community
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
10 participants
@VedantKhairnar @Shruti3004 @pandutibil @psankhe28 @Smritisuresh @Sayan2908 @SanjayRam07 @Debatreya @Kushdapush @sagarkori143