Sunbird-cQube / dashboard-ms

https://dashboard-ms.vercel.app
0 stars 33 forks source link

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

Open pandutibil opened 8 months ago

pandutibil commented 8 months ago

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:

Following are the variations of bar chart

Line and bar (combined chart)

Goals

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

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[bot] commented 8 months ago

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

Please update the ticket

Debatreya commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

Sure, Thanks!

pandutibil commented 7 months ago

Hi Debatreya,

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

Thank You.

Debatreya commented 7 months ago

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

Smritisuresh commented 7 months ago

@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 commented 7 months ago

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 commented 7 months ago

@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 commented 7 months ago

I'm available @Smritisuresh

Thank you

Smritisuresh commented 7 months ago

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 https://github.com/Sunbird-cQube/dashboard-ms/issues/401#issuecomment-1920859248, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXQ7FBNDQKP24CJPGYPEE33YRNMRNAVCNFSM6AAAAABBOB3AAOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMRQHA2TSMRUHA . You are receiving this because you were mentioned.Message ID: @.***>

pandutibil commented 7 months ago

When you'll be available?

Smritisuresh commented 7 months ago

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 https://github.com/Sunbird-cQube/dashboard-ms/issues/401#issuecomment-1920943549, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXQ7FBMVGKOGAMBNU2JNIXDYRNRMFAVCNFSM6AAAAABBOB3AAOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMRQHE2DGNJUHE . You are receiving this because you were mentioned.Message ID: @.***>

SanjayRam07 commented 7 months ago

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

pandutibil commented 7 months ago

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 commented 7 months ago

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 sankhepratiksha3@gmail.com.

pandutibil commented 6 months ago

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 commented 6 months ago

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 sankhepratiksha3@gmail.com.

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 commented 6 months ago

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 sankhepratiksha3@gmail.com.

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 commented 6 months ago

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

psankhe28 commented 6 months ago

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

Yes, it's fine.

SanjayRam07 commented 6 months ago

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 commented 6 months ago

@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 commented 5 months ago

@pandutibil can I work on this issue

pandutibil commented 5 months ago

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 commented 5 months ago

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

psankhe28 commented 5 months ago

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 commented 3 weeks ago

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

VedantKhairnar commented 1 week ago

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 commented 1 week ago

@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 commented 1 week ago

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

Kushdapush commented 1 week ago

I'll try to raise one by the next Monday