Skip to content

Fix incorrect parsing of e notation svg command values in graphics.roundPathCorners #4991

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
Merged
merged 1 commit into from
Mar 23, 2025
Merged

Fix incorrect parsing of e notation svg command values in graphics.roundPathCorners #4991

merged 1 commit into from
Mar 23, 2025

Conversation

@ablagoev
Copy link
Contributor

@ablagoev ablagoev commented Mar 20, 2025 •
edited
Loading

New Pull Request

The roundPathCorners function in the Graphics module conains a bug when dealing with e notation values. A path like this:

M -4.864179421768709 280.1277080745341 L -4.864179421768709 273.12454037267077 L -8.881784197001252e-16 273.12454037267077 L -8.881784197001252e-16 280.1277080745341 Z

is incorrectly parsed and the result is:

M -4.864179421768709 280.1277080745341 L -4.864179421768709 273.12454037267077 L e -16 273.12454037267077 L e -16 280.1277080745341 L -4.864179421768709 280.1277080745341 C -4.864179421768709 280.1277080745341 -4.864179421768709 280.1277080745341 -4.864179421768709 280.1277080745341 Z

which leads to an svg parser error. The problem is with the following regex:

var match = part.match('([a-zA-Z])(.+)');

which incorrectly matches the e notation. I am suggesting the minimal fix, which changes the regex to only match alphas at the start of the string.

var match = part.match(/^([a-zA-Z])(.+)/);

I am also attaching a reproduction case if the fix is not adequate.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Line &amp; Column</title>

    <link href="../../assets/styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/deep-diff/1.0.2/deep-diff.min.js"></script>


    <style>

    #chart {
      max-width: 650px;
      margin: 35px auto;
    }

    </style>

    <script>
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
        )
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
        )
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
        )
    </script>


    <script src="../../../dist/apexcharts.js"></script>


    <script>
      // Replace Math.random() with a pseudo-random number generator to get reproducible results in e2e tests
      // Based on https://gist.github.com/blixt/f17b47c62508be59987b
      var _seed = 42;
      Math.random = function() {
        _seed = _seed * 16807 % 2147483647;
        return (_seed - 1) / 2147483646;
      };
    </script>


  </head>

  <body>
     <div id="chart"></div>

    <script>
    const model = {
      options: {
        xaxis: {
          categories: [
            "2025-03-06",
            "2025-03-07",
            "2025-03-09",
            "2025-03-10",
            "2025-03-11",
            "2025-03-12",
            "2025-03-13",
            "2025-03-14",
            "2025-03-15",
            "2025-03-17",
            "2025-03-18",
            "2025-03-19",
            "2025-03-20"
          ],
          title: {
            text: "Date"
          },
          type: "datetime",
          tickPlacement: "on",
          labels: {
            format: "yyyy-MM-dd"
          }
        },
        tooltip: {
          shared: false,
          hideEmptySeries: true,
          y: {}
        },
        plotOptions: {
          bar: {
            columnWidth: "80%",
            dataLabels: {
              position: "top"
            }
          }
        },
        grid: {
          padding: {
            left: 20,
            right: 20
          }
        },
        title: {
          text: "Title Chart"
        },
        dataLabels: {
          offsetX: 0,
          offsetY: -20,
          style: {
            colors: [
              "#000"
            ]
          }
        },
        chart: {
          id: "movements-by-producer-chart",
          type: "bar",
          toolbar: {
            show: false
          },
          zoom: {
            allowMouseWheelZoom: false
          }
        }
      },
      series: [
        {
          "name": "Series 23",
          "group": "Series 23",
          "data": [
            {
              "x": "2025-03-06",
              "y": 62
            },
            {
              "x": "2025-03-07",
              "y": 13
            },
            {
              "x": "2025-03-09",
              "y": 59
            },
            {
              "x": "2025-03-10",
              "y": 69
            },
            {
              "x": "2025-03-11",
              "y": 170
            },
            {
              "x": "2025-03-12",
              "y": 6
            },
            {
              "x": "2025-03-13",
              "y": 98
            },
            {
              "x": "2025-03-14",
              "y": 93
            },
            {
              "x": "2025-03-15",
              "y": 22
            },
            {
              "x": "2025-03-17",
              "y": 82
            },
            {
              "x": "2025-03-18",
              "y": 81
            },
            {
              "x": "2025-03-19",
              "y": 50
            },
            {
              "x": "2025-03-20",
              "y": 16
            }
          ]
        },
        {
          "name": "First Series",
          "group": "First Series",
          "data": [
            {
              "x": "2025-03-06",
              "y": 355
            },
            {
              "x": "2025-03-07",
              "y": 347
            },
            {
              "x": "2025-03-09",
              "y": 0
            },
            {
              "x": "2025-03-10",
              "y": 383
            },
            {
              "x": "2025-03-11",
              "y": 317
            },
            {
              "x": "2025-03-12",
              "y": 133
            },
            {
              "x": "2025-03-13",
              "y": 0
            },
            {
              "x": "2025-03-14",
              "y": 123
            },
            {
              "x": "2025-03-15",
              "y": 103
            },
            {
              "x": "2025-03-17",
              "y": 122
            },
            {
              "x": "2025-03-18",
              "y": 310
            },
            {
              "x": "2025-03-19",
              "y": 209
            },
            {
              "x": "2025-03-20",
              "y": 35
            }
          ]
        },
        {
          "name": "Second Series",
          "group": "Second Series",
          "data": [
            {
              "x": "2025-03-06",
              "y": 10
            },
            {
              "x": "2025-03-07",
              "y": 10
            },
            {
              "x": "2025-03-09",
              "y": 10
            },
            {
              "x": "2025-03-10",
              "y": 10
            },
            {
              "x": "2025-03-11",
              "y": 10
            },
            {
              "x": "2025-03-12",
              "y": 10
            },
            {
              "x": "2025-03-13",
              "y": 10
            },
            {
              "x": "2025-03-14",
              "y": 10
            },
            {
              "x": "2025-03-15",
              "y": 10
            },
            {
              "x": "2025-03-17",
              "y": 10
            },
            {
              "x": "2025-03-18",
              "y": 10
            },
            {
              "x": "2025-03-19",
              "y": 10
            },
            {
              "x": "2025-03-20",
              "y": 10
            }
          ]
        },
        {
          "name": "Fifth Series",
          "group": "Fifth Series",
          "data": [
            {
              "x": "2025-03-06",
              "y": 0
            },
            {
              "x": "2025-03-07",
              "y": 0
            },
            {
              "x": "2025-03-09",
              "y": 0
            },
            {
              "x": "2025-03-10",
              "y": 0
            },
            {
              "x": "2025-03-11",
              "y": 0
            },
            {
              "x": "2025-03-12",
              "y": 0
            },
            {
              "x": "2025-03-13",
              "y": 0
            },
            {
              "x": "2025-03-14",
              "y": 0
            },
            {
              "x": "2025-03-15",
              "y": 0
            },
            {
              "x": "2025-03-17",
              "y": 0
            },
            {
              "x": "2025-03-18",
              "y": 41
            },
            {
              "x": "2025-03-19",
              "y": 0
            },
            {
              "x": "2025-03-20",
              "y": 0
            }
          ]
        },
        {
          "name": "Fourth Series",
          "group": "Foruth Series",
          "data": [
            {
              "x": "2025-03-06",
              "y": 209
            },
            {
              "x": "2025-03-07",
              "y": 26
            },
            {
              "x": "2025-03-09",
              "y": 0
            },
            {
              "x": "2025-03-10",
              "y": 245
            },
            {
              "x": "2025-03-11",
              "y": 188
            },
            {
              "x": "2025-03-12",
              "y": 127
            },
            {
              "x": "2025-03-13",
              "y": 143
            },
            {
              "x": "2025-03-14",
              "y": 126
            },
            {
              "x": "2025-03-15",
              "y": 0
            },
            {
              "x": "2025-03-17",
              "y": 36
            },
            {
              "x": "2025-03-18",
              "y": 59
            },
            {
              "x": "2025-03-19",
              "y": 80
            },
            {
              "x": "2025-03-20",
              "y": 0
            }
          ]
        },
        {
          "name": "Third Series",
          "group": "Third Series",
          "data": [
            {
              "x": "2025-03-06",
              "y": 0
            },
            {
              "x": "2025-03-07",
              "y": 0
            },
            {
              "x": "2025-03-09",
              "y": 0
            },
            {
              "x": "2025-03-10",
              "y": 86
            },
            {
              "x": "2025-03-11",
              "y": 0
            },
            {
              "x": "2025-03-12",
              "y": 96
            },
            {
              "x": "2025-03-13",
              "y": 113
            },
            {
              "x": "2025-03-14",
              "y": 74
            },
            {
              "x": "2025-03-15",
              "y": 0
            },
            {
              "x": "2025-03-17",
              "y": 76
            },
            {
              "x": "2025-03-18",
              "y": 90
            },
            {
              "x": "2025-03-19",
              "y": 64
            },
            {
              "x": "2025-03-20",
              "y": 0
            }
          ]
        }
      ]
    };

    const options = model.options;
    options.series = model.series;

    var chart = new ApexCharts(
      document.querySelector("#chart"),
      options
    );
    chart.render();
    </script>
  </body>
</html>

Type of change

  • Bug fix (non-breaking change which fixes an issue)

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • My changes generate no new warnings
  • New and existing unit tests pass locally with my changes
  • My branch is up to date with any changes from the main branch

@junedchhipa junedchhipa merged commit 8d05050 into apexcharts:main Mar 23, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@junedchhipa junedchhipa junedchhipa approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@ablagoev @junedchhipa