Implement feature request apexcharts#4237: see new sample:

area/multi-axis-with-seriesname-arrays.xml - also use this facility to simplify the specification of series inclusion in stacked charts, especially when combined with other series. See stacked-column-with-line.xml and c.f. stacked-column-with-line-new.xml The new facility should be backward compatible with the existing style (both described below to the best of my knowledge), via code that converts the old data structure to the new one. The current style of mapping multiple series to a y axis is to include one yaxis config per series but set each yaxis seriesName to the same series name and then set show: false on all axes that are not required. While not the purpose of apexcharts#4237, it offers a more intuitive alternative that explicitly configures yaxis elements with the series that will be referenced to them (seriesName: []). This only requires including the yaxis elements that will be seen on the chart. Old way: yax: ser 0: 0 1: 1 2: 1 3: 1 4: 1 Axes 0..4 are all scaled and all will be rendered unless the axes are show: false. If the chart is stacked, it's assumed that series 1..4 are the contributing series. New way: yax: ser 0: [0] 1: [1,2,3,4] If the chart is stacked (a global chart setting), it must be assumed that any axis with multiple series is stacked, presumably as separate sets (not yet implemented). Fix stacked chart y axis scaling: min and max were computed as the sum of the series min and max, not the min and max od the summed datapoints in each series. Note: it is left to the creativity of the user to visually disambiguate which plot is associated with which Y axis. Additional checks for undefined elements in CoreUtils.extendArrayProps(). Remove the duplicate outlier in boxplot-scatter.xml.
rosco54 · Feb 19, 2024 · 1ca94a5 · 1ca94a5
1 parent 80eba01
commit 1ca94a5
Show file tree

Hide file tree

Showing 138 changed files with 2,428 additions and 203 deletions.
diff --git a/samples/react/area/multi-axis-with-seriesname-arrays.html b/samples/react/area/multi-axis-with-seriesname-arrays.html
@@ -0,0 +1,227 @@
+<!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>Multi-YAxis-with-seriesName-arrays</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/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="https://cdn.jsdelivr.net/npm/react@16.12/umd/react.production.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.12/umd/react-dom.production.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/prop-types@15.7.2/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/react-apexcharts@1.3.6/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>
+  var generateDayWiseTimeSeries = function (baseval, count, yrange) {
+    var i = 0;
+    var series = [];
+    while (i < count) {
+      var x = baseval;
+      var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
+
+      series.push([x, y]);
+      baseval += 86400000;
+      i++;
+    }
+    return series;
+  };
+
+  var data1 = generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
+       min: 5,
+       max: 20
+     });
+
+  var data2 = generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
+       min: 10,
+       max: 20
+     });
+
+  var data3 = generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
+       min: 5,
+       max: 25
+     });
+
+  var data4 = generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
+       min: 10,
+       max: 35
+     });
+  </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;area&quot; height={350} /&gt;
+&lt;/div&gt;
+    </div>
+
+    <script type="text/babel">
+      class ApexChart extends React.Component {
+        constructor(props) {
+          super(props);
+
+          this.state = {
+
+            series: [{
+               name: 'Broccoli',
+               data: data1
+             },
+             {
+               name: 'Spinach',
+               data: data2
+             },
+             {
+               name: 'Apples',
+               data: data3
+             },
+             {
+               name: 'Plums',
+               data: data4
+             }],
+            options: {
+              chart: {
+                type: 'area',
+                height: 350,
+                stacked: false
+              },
+              colors: ['#00EE00', '#008800', '#FF0000', '#AA00FF'],
+              dataLabels: {
+                enabled: false
+              },
+              stroke: {
+                curve: 'monotoneCubic',
+                width: [4, 4, 2, 2],
+                dashArray: [0, 0, 2, 2]
+              },
+              legend: {
+                position: 'top',
+                horizontalAlign: 'left'
+              },
+              yaxis: [
+                {
+                  seriesName: ['Broccoli', 'Spinach'],
+                  axisTicks: {
+                    show: true,
+                    color: '#008800'
+                  },
+                  axisBorder: {
+                    show: true,
+                    color: '#008800'
+                  },
+                  labels: {
+                    style: {
+                      colors: '#008800',
+                    },
+                    formatter: (val) => {
+                      let ref = val.toFixed(0);
+                      return val == ref ? val : ''
+                    }
+                  },
+                  title: {
+                    text: "Vegetables",
+                    style: {
+                      color: '#008800'
+                    }
+                  },
+                },
+                {
+                  seriesName: ['Plums','Apples'],
+                  opposite: true,
+                  axisTicks: {
+                    show: true,
+                    color: '#FF0000'
+                  },
+                  axisBorder: {
+                    show: true,
+                    color: '#FF0000'
+                  },
+                  labels: {
+                    style: {
+                      colors: '#FF0000',
+                    },
+                    formatter: (val) => {
+                      let ref = val.toFixed(0);
+                      return val == ref ? val : ''
+                    }
+                  },
+                  title: {
+                    text: "Fruit",
+                    style: {
+                      color: '#FF0000'
+                    }
+                  },
+                }
+              ],
+              xaxis: {
+                type: 'datetime'
+              }
+            },
+
+
+          };
+        }
+
+
+
+        render() {
+          return (
+            <div>
+              <div id="chart">
+                <ReactApexChart options={this.state.options} series={this.state.series} type="area" 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/react/boxPlot/boxplot-scatter.html b/samples/react/boxPlot/boxplot-scatter.html
@@ -118,10 +118,6 @@
                     x: new Date('2020-01-01').getTime(),
                     y: 27
                   },
-                  {
-                    x: new Date('2020-01-01').getTime(),
-                    y: 78
-                  },
                   {
                     x: new Date('2021-01-01').getTime(),
                     y: 15