Implements feature request: apexcharts#4313

Provide a "step before" version of the current "step after" line chart. API: Retain the existing "stepline" curve type for backward compatibility and denote the new type as "linestep". Example: stroke: { curve: 'linestep' } Add e2e sample: source/line/linestep.xml and derived (built) samples.
rosco54 · Mar 12, 2024 · db3d468 · db3d468
1 parent d5a6bfe
commit db3d468
Show file tree

Hide file tree

Showing 8 changed files with 405 additions and 3 deletions.
diff --git a/samples/playground/options.js b/samples/playground/options.js
@@ -3320,7 +3320,7 @@ export const optionsPattern = {
             'In line/area charts, whether to draw smooth lines or straight lines',
           url: 'https://apexcharts.com/docs/options/stroke/#curve',
           type: String,
-          choices: ['smooth', 'straight', 'stepline'],
+          choices: ['smooth', 'straight', 'stepline', 'linestep'],
           default: 'smooth'
         },
         lineCap: {

diff --git a/samples/react/line/linestep.html b/samples/react/line/linestep.html
@@ -0,0 +1,133 @@
+<!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>Linestep Chart</title>
+
+    <link href="../../assets/styles.css" rel="stylesheet" />
+
+    <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/[email protected]/classList.min.js"><\/script>'
+        )
+      window.Promise ||
+        document.write(
+          '<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
+        )
+    </script>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/prop-types.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
+    <script src="../../../dist/apexcharts.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/react-apexcharts.iife.min.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>
+
+    <script src="../../assets/irregular-data-series.js"></script>
+  <script>
+    var ts2 = 1484418600000;
+    var data = [];
+    var spikes = [5, -5, 3, -3, 8, -8]
+    for (var i = 0; i < 30; i++) {
+      ts2 = ts2 + 86400000;
+      var innerArr = [ts2, dataSeries[1][i].value];
+      data.push(innerArr)
+    }
+  </script>
+  </head>
+
+  <body>
+
+    <div id="app"></div>
+
+    <div id="html">
+      &lt;div id=&quot;chart&quot;&gt;
+  &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;line&quot; height={350} /&gt;
+&lt;/div&gt;
+    </div>
+
+    <script type="text/babel">
+      class ApexChart extends React.Component {
+        constructor(props) {
+          super(props);
+
+          this.state = {
+
+            series: [{
+              data: [34, 44, 54, 21, 12, 43, 33, 23, 66, 66, 58]
+            }],
+            options: {
+              chart: {
+                type: 'line',
+                height: 350
+              },
+              stroke: {
+                curve: 'linestep',
+              },
+              dataLabels: {
+                enabled: false
+              },
+              title: {
+                text: 'Linestep Chart',
+                align: 'left'
+              },
+              markers: {
+                hover: {
+                  sizeOffset: 4
+                }
+              }
+            },
+
+
+          };
+        }
+
+
+
+        render() {
+          return (
+            <div>
+              <div id="chart">
+                <ReactApexChart options={this.state.options} series={this.state.series} type="line" height={350} />
+              </div>
+              <div id="html-dist"></div>
+            </div>
+          );
+        }
+      }
+
+      const domContainer = document.querySelector('#app');
+      ReactDOM.render(React.createElement(ApexChart), domContainer);
+    </script>
+
+
+  </body>
+</html>
diff --git a/samples/source/line/linestep.xml b/samples/source/line/linestep.xml
@@ -0,0 +1,45 @@
+<title>Linestep Chart</title>
+
+<scripts>
+<script src="../../assets/irregular-data-series.js"></script>
+<script>
+  var ts2 = 1484418600000;
+  var data = [];
+  var spikes = [5, -5, 3, -3, 8, -8]
+  for (var i = 0; i < 30; i++) {
+    ts2 = ts2 + 86400000;
+    var innerArr = [ts2, dataSeries[1][i].value];
+    data.push(innerArr)
+  }
+</script>
+</scripts>
+
+<chart>
+<options>
+chart: {
+  type: 'line',
+  height: 350
+},
+stroke: {
+  curve: 'linestep',
+},
+dataLabels: {
+  enabled: false
+},
+title: {
+  text: 'Linestep Chart',
+  align: 'left'
+},
+markers: {
+  hover: {
+    sizeOffset: 4
+  }
+}
+</options>
+
+<series>
+[{
+  data: [34, 44, 54, 21, 12, 43, 33, 23, 66, 66, 58]
+}]
+</series>
+</chart>
diff --git a/samples/vanilla-js/line/linestep.html b/samples/vanilla-js/line/linestep.html
@@ -0,0 +1,100 @@
+<!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>Linestep Chart</title>
+
+    <link href="../../assets/styles.css" rel="stylesheet" />
+
+    <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/[email protected]/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>
+
+    <script src="../../assets/irregular-data-series.js"></script>
+  <script>
+    var ts2 = 1484418600000;
+    var data = [];
+    var spikes = [5, -5, 3, -3, 8, -8]
+    for (var i = 0; i < 30; i++) {
+      ts2 = ts2 + 86400000;
+      var innerArr = [ts2, dataSeries[1][i].value];
+      data.push(innerArr)
+    }
+  </script>
+  </head>
+
+  <body>
+     <div id="chart"></div>
+
+    <script>
+
+        var options = {
+          series: [{
+          data: [34, 44, 54, 21, 12, 43, 33, 23, 66, 66, 58]
+        }],
+          chart: {
+          type: 'line',
+          height: 350
+        },
+        stroke: {
+          curve: 'linestep',
+        },
+        dataLabels: {
+          enabled: false
+        },
+        title: {
+          text: 'Linestep Chart',
+          align: 'left'
+        },
+        markers: {
+          hover: {
+            sizeOffset: 4
+          }
+        }
+        };
+
+        var chart = new ApexCharts(document.querySelector("#chart"), options);
+        chart.render();
+
+
+    </script>
+
+
+  </body>
+</html>