feat: support maidr object handling with an attribute to svg or img tag

[dakshpokar]

Pull Request

Description

This PR adds the ability to configure MAIDR through HTML attributes, while maintaining backward compatibility with the existing script-based configuration method. Now users can initialize MAIDR in two ways:

Traditional script-based method (existing):

var maidr = {
    id: "chart1",
    type: "bar",
    // ... other configuration
};

New attribute-based method:

<svg id="chart1" maidr='{"type": "bar", "data": {...}}'>...</svg>

Changes Made

1. Added support for parsing maidr configuration from HTML elements with maidr attribute
2. Maintained backward compatibility with existing script-based configuration
3. Added a bar chart example with attribute based initialization of maidr object.

Screenshots (if applicable)

Checklist

• I have read the Contributor Guidelines.
• I have performed a self-review of my own code and ensured it follows the project's coding standards.
• I have tested the changes locally following ManualTestingProcess.md, and all tests related to this pull request pass.
• I have commented my code, particularly in hard-to-understand areas.
• I have updated the documentation, if applicable.
• I have added appropriate unit tests, if applicable.

Additional Notes

[dakshpokar]

Greetings Professor @jooyoungseo,

This PR implements HTML attribute-based configuration for MAIDR, allowing users to define chart configurations directly in their HTML markup. This enhancement provides a more flexible and maintainable way to initialize MAIDR without requiring separate script tags.

Key Implementation Details:

• Added support for maidr attribute in HTML elements (SVG/IMG) that accepts stringified JSON configuration
• Maintains full backward compatibility with existing script-based configuration
• Added a bar chart example with attribute based initialization of maidr object.

Example Usage:

<!-- New attribute-based configuration -->
<svg id="chart1" maidr='{"type": "bar", "title": "Sales Data", "data": [...]}'>
  <!-- chart content -->
</svg>

<!-- Traditional script-based configuration still works -->
<script>
var maidr = { id: "chart2", type: "scatter", ... };
</script>

Thanks,
Daksh Pokar
cc: @ellvix @SaaiVenkat

[jooyoungseo]

LGTM! Go go!

[github-actions]

🎉 This PR is included in version 2.29.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀