update react samples to functional components

apexcharts · Dec 4, 2024 · 6f14ff0 · 6f14ff0
1 parent c6f544f
commit 6f14ff0
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 60 deletions.
diff --git a/samples/source/area/area-datetime.xml b/samples/source/area/area-datetime.xml
@@ -36,32 +36,32 @@
   <div class="toolbar">
     <button id="one_month"
         {% if format == 'vue' %}@click="updateData('one_month')" :class="{active: selection==='one_month'}"{% endif %}
-        {% if format == 'react' %}onClick={()=>this.updateData('one_month')} className={ (this.state.selection==='one_month' ? 'active' : '')}{% endif %}>
+        {% if format == 'react' %}onClick={()=>updateData('one_month')} className={ (state.selection==='one_month' ? 'active' : '')}{% endif %}>
       1M
     </button>
     {% if format == 'react' %}&nbsp;{% endif %}
     <button id="six_months"
         {% if format == 'vue' %}@click="updateData('six_months')" :class="{active: selection==='six_months'}"{% endif %}
-        {% if format == 'react' %}onClick={()=>this.updateData('six_months')} className={ (this.state.selection==='six_months' ? 'active' : '')}{% endif %}>
+        {% if format == 'react' %}onClick={()=>updateData('six_months')} className={ (state.selection==='six_months' ? 'active' : '')}{% endif %}>
       6M
     </button>
     {% if format == 'react' %}&nbsp;{% endif %}
     <button id="one_year"
         {% if format == 'vanilla-js' %}class="active"{% endif %}
         {% if format == 'vue' %}@click="updateData('one_year')" :class="{active: selection==='one_year'}"{% endif %}
-        {% if format == 'react' %}onClick={()=>this.updateData('one_year')} className={ (this.state.selection==='one_year' ? 'active' : '')}{% endif %}>
+        {% if format == 'react' %}onClick={()=>updateData('one_year')} className={ (state.selection==='one_year' ? 'active' : '')}{% endif %}>
       1Y
     </button>
     {% if format == 'react' %}&nbsp;{% endif %}
     <button id="ytd"
         {% if format == 'vue' %}@click="updateData('ytd')" :class="{active: selection==='ytd'}"{% endif %}
-        {% if format == 'react' %}onClick={()=>this.updateData('ytd')} className={ (this.state.selection==='ytd' ? 'active' : '')}{% endif %}>
+        {% if format == 'react' %}onClick={()=>updateData('ytd')} className={ (state.selection==='ytd' ? 'active' : '')}{% endif %}>
       YTD
     </button>
     {% if format == 'react' %}&nbsp;{% endif %}
     <button id="all"
         {% if format == 'vue' %}@click="updateData('all')" :class="{active: selection==='all'}"{% endif %}
-        {% if format == 'react' %}onClick={()=>this.updateData('all')} className={ (this.state.selection==='all' ? 'active' : '')}{% endif %}>
+        {% if format == 'react' %}onClick={()=>updateData('all')} className={ (state.selection==='all' ? 'active' : '')}{% endif %}>
       ALL
     </button>
   </div>
@@ -486,8 +486,8 @@ selection: 'one_year',
 </react-state>
 
 <react-script>
-updateData(timeline) {
-  this.setState({
+const updateData = (timeline) => {
+  setState({
     selection: timeline
   })
 

diff --git a/samples/source/column/dynamic-loaded-chart.xml b/samples/source/column/dynamic-loaded-chart.xml
@@ -269,7 +269,7 @@ function updateQuarterChart(sourceChart, destChartIDToUpdate) {
 <html>
 <div id="wrap">
   <select id="model" class="flat-select"
-      {% if format == 'react' %}onChange={() => this.changeData()}{% endif %}
+      {% if format == 'react' %}onChange={() => changeData()}{% endif %}
       {% if format == 'vue' %}@change="changeData"{% endif %}>
     <option value="iphone5">iPhone 5</option>
     <option value="iphone6">iPhone 6</option>
@@ -493,7 +493,7 @@ document.querySelector("#model").addEventListener("change", function (e) {
 </vanilla-js-script>
 
 <react-script>
-changeData() {
+function changeData() {
   Apex.exec('barYear', 'updateSeries', [{
     data: makeData()
   }])

diff --git a/samples/source/index.js b/samples/source/index.js
@@ -36,7 +36,7 @@ function parseSampleXML(xmlPath) {
     'react-state',
     'react-script',
     'vue-data',
-    'vue-script'
+    'vue-script',
   ]
   const info = extractXMLSections(data, globalSections, xmlPath)
   info.charts = []
@@ -125,7 +125,7 @@ function extractSampleInfo() {
           samples.push({
             dirName,
             fileName: fileName.slice(0, -4),
-            info
+            info,
           })
         }
       }
@@ -144,7 +144,7 @@ async function generateSampleHtml() {
   const sourceDir = path.join(samplesDir, 'source')
   const env = nunjucks.configure(sourceDir, {
     autoescape: false,
-    noCache: true
+    noCache: true,
   })
   env.addFilter('indent', (str, indent) => {
     return str
@@ -201,7 +201,7 @@ async function generateSampleHtml() {
             } else if (format === 'react') {
               chartHtml =
                 `<div id="${chart.elemId}">\n` +
-                `  <ReactApexChart options={this.state.options${chart.varName}} series={this.state.series${chart.varName}} type="${chart.type}" ${attrs}/>\n` +
+                `  <ReactApexChart options={state.options${chart.varName}} series={state.series${chart.varName}} type="${chart.type}" ${attrs}/>\n` +
                 `</div>`
             } else if (format === 'vue') {
               if (info.vue_script.includes('.$refs')) {

diff --git a/samples/source/line/realtime.xml b/samples/source/line/realtime.xml
@@ -123,7 +123,7 @@ var interval = window.setInterval(function () {
 </vanilla-js-script>
 
 <react-script>
-componentDidMount() {
+React.useEffect(() => {
   window.setInterval(() => {
     getNewSeries(lastDate, {
       min: 10,
@@ -134,7 +134,7 @@ componentDidMount() {
       data: data
     }])
   }, 1000)
-}
+}, [])
 </react-script>
 
 <vue-script>

diff --git a/samples/source/misc/annotations-example.xml b/samples/source/misc/annotations-example.xml
@@ -160,7 +160,7 @@ ApexCharts.exec('chart', 'removeAnnotation', 'yaxis-anno')
 </vanilla-js-script>
 
 <react-script>
-componentDidMount() {
+React.useEffect(() => {
   ApexCharts.exec('chart', 'addYaxisAnnotation', {
     id: 'yaxis-anno',
     y: 9000,
@@ -210,7 +210,7 @@ componentDidMount() {
   });
 
   ApexCharts.exec('chart', 'removeAnnotation', 'point-anno');
-}
+}, [])  
 </react-script>
 
 <vue-script>

diff --git a/samples/source/pie/donut-update.xml b/samples/source/pie/donut-update.xml
@@ -42,28 +42,28 @@ p {
   <div class="actions">
     <button
         {% if format == 'vanilla-js' %}id="add"{% endif %}
-        {% if format == 'react' %}onClick={() => this.appendData()}{% endif %}
+        {% if format == 'react' %}onClick={() => appendData()}{% endif %}
         {% if format == 'vue' %}@click="appendData"{% endif %}>
       + ADD
     </button>
     {% if format == 'react' %}&nbsp;{% endif %}
     <button
         {% if format == 'vanilla-js' %}id="remove"{% endif %}
-        {% if format == 'react' %}onClick={() => this.removeData()}{% endif %}
+        {% if format == 'react' %}onClick={() => removeData()}{% endif %}
         {% if format == 'vue' %}@click="removeData"{% endif %}>
       - REMOVE
     </button>
     {% if format == 'react' %}&nbsp;{% endif %}
     <button
         {% if format == 'vanilla-js' %}id="randomize"{% endif %}
-        {% if format == 'react' %}onClick={() => this.randomize()}{% endif %}
+        {% if format == 'react' %}onClick={() => randomize()}{% endif %}
         {% if format == 'vue' %}@click="randomize"{% endif %}>
       RANDOMIZE
     </button>
     {% if format == 'react' %}&nbsp;{% endif %}
     <button
         {% if format == 'vanilla-js' %}id="reset"{% endif %}
-        {% if format == 'react' %}onClick={() => this.reset()}{% endif %}
+        {% if format == 'react' %}onClick={() => reset()}{% endif %}
         {% if format == 'vue' %}@click="reset"{% endif %}>
       RESET
     </button>
@@ -144,36 +144,40 @@ document.querySelector("#reset").addEventListener("click", function() {
 </vanilla-js-script>
 
 <react-script>
-appendData() {
-  var arr = this.state.series.slice()
+function appendData() {
+  var arr = state.series.slice()
   arr.push(Math.floor(Math.random() * (100 - 1 + 1)) + 1)
 
-  this.setState({
+  setState({
+    ...state,
     series: arr
   })
 }
 
-removeData() {
-  if(this.state.series.length === 1) return
+function removeData() {
+  if(state.series.length === 1) return
 
-  var arr = this.state.series.slice()
+  var arr = state.series.slice()
   arr.pop()
 
-  this.setState({
+  setState({
+    ...state,
     series: arr
   })
 }
 
-randomize() {
-  this.setState({
-    series: this.state.series.map(function() {
+function randomize() {
+  setState({
+    ...state,
+    series: state.series.map(function() {
       return Math.floor(Math.random() * (100 - 1 + 1)) + 1
     })
   })
 }
 
-reset() {
-  this.setState({
+function reset() {
+  setState({
+    ...state,
     series: [44, 55, 13, 33]
   })
 }

diff --git a/samples/source/template.html b/samples/source/template.html
@@ -32,12 +32,12 @@
     {% if format == 'vanilla-js' %}
     <script src="../../../dist/apexcharts.js"></script>
     {% elif format == 'react' %}
-    <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://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/prop-types@15.8.1/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 src="https://cdn.jsdelivr.net/npm/react-apexcharts@1.7.0/dist/react-apexcharts.iife.min.js"></script>
     {% elif format == 'vue' %}
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
     <script src="../../../dist/apexcharts.js"></script>
@@ -83,11 +83,8 @@
     </div>
 
     <script type="text/babel">
-      class ApexChart extends React.Component {
-        constructor(props) {
-          super(props);
-
-          this.state = {
+      const ApexChart = () => {
+        const [state, setState] = React.useState({
           {% for chart in charts %}
             series{{ chart.varName }}: {{ chart.series|indent(12) }},
             options{{ chart.varName }}: {
@@ -97,25 +94,22 @@
           {% if react_state %}
             {{ react_state|indent() }}
           {% endif %}
-          };
-        }
-
-      {% if react_script %}
-        {{ react_script|indent(8) }}
-      {% endif %}
-
-        render() {
-          return (
-            <div>
-              {{ html|indent(14) }}
-              <div id="html-dist"></div>
-            </div>
-          );
-        }
+        });
+
+        {% if react_script %}
+          {{ react_script|indent(8) }}
+        {% endif %}
+
+        return (
+          <div>
+            {{ html|indent(14) }}
+            <div id="html-dist"></div>
+          </div>
+        );
       }
 
       const domContainer = document.querySelector('#app');
-      ReactDOM.render(React.createElement(ApexChart), domContainer);
+      ReactDOM.render(<ApexChart />, domContainer);
     </script>
 
     {% elif format == 'vue' %}

diff --git a/samples/source/timelines/multi-series-group-rows.xml b/samples/source/timelines/multi-series-group-rows.xml
@@ -37,8 +37,10 @@ tooltip: {
     const toYear = new Date(opts.y2).getFullYear()
 
     const w = opts.ctx.w
-    let ylabel =
-      w.config.series[opts.seriesIndex].data?.[opts.dataPointIndex]?.x
+    let ylabel = ""
+    if(w.config.series[opts.seriesIndex].data && w.config.series[opts.seriesIndex].data[opts.dataPointIndex]) {
+      ylabel = w.config.series[opts.seriesIndex].data[opts.dataPointIndex].x;
+    }
     let seriesName = w.config.series[opts.seriesIndex].name
       ? w.config.series[opts.seriesIndex].name
       : ''