Fix

Author: pharret31

apps/demos/Demos/Charts/LoadDataOnDemand/ReactJs/App.js

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import { DataSource } from "devextreme-react/common/data";
+import React, { useState } from 'react';
+import { DataSource } from 'devextreme-react/common/data';
 import {
   Chart,
   ZoomAndPan,
@@ -13,12 +13,13 @@ import {
   Series,
   Animation,
   LoadingIndicator,
-} from "devextreme-react/chart";
+} from 'devextreme-react/chart';
+
 const HALFDAY = 43200000;
 let packetsLock = 0;
 const chartDataSource = new DataSource({
   store: [],
-  sort: "date",
+  sort: 'date',
   paginate: false,
 });
 const wholeRange = {
@@ -31,7 +32,7 @@ function App() {
     endValue: new Date(2017, 3, 15),
   });
   const handleChange = (e) => {
-    if (e.fullName === "argumentAxis.visualRange") {
+    if (e.fullName === 'argumentAxis.visualRange') {
       const stateStart = visualRange.startValue;
       const currentStart = e.value.startValue;
       if (stateStart.valueOf() !== currentStart.valueOf()) {
@@ -114,22 +115,22 @@ const uploadDataByVisualRange = (visualRange, component) => {
 const onVisualRangeChanged = (visualRange, component) => {
   const items = component.getDataSource().items();
   if (
-    !items.length ||
-    items[0].date - visualRange.startValue.getTime() >= HALFDAY ||
-    visualRange.endValue.getTime() - items[items.length - 1].date >= HALFDAY
+    !items.length
+    || items[0].date - visualRange.startValue.getTime() >= HALFDAY
+    || visualRange.endValue.getTime() - items[items.length - 1].date >= HALFDAY
   ) {
     uploadDataByVisualRange(visualRange, component);
   }
 };
 function getDataFrame(args) {
-  let params = "?";
+  let params = '?';
   params += `startVisible=${args.startVisible}
     &endVisible=${args.endVisible}`;
   return fetch(`https://js.devexpress.com/Demos/NetCore/api/TemperatureData${params}`).then(
-    (response) => response.json()
+    (response) => response.json(),
   );
 }
 function getDateString(dateTime) {
-  return dateTime ? dateTime.toLocaleDateString("en-US") : "";
+  return dateTime ? dateTime.toLocaleDateString('en-US') : '';
 }
 export default App;

apps/demos/Demos/Charts/LoadDataOnDemand/ReactJs/index.js

@@ -1,4 +1,5 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App.js";
-ReactDOM.render(<App />, document.getElementById("app"));
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App.js';
+
+ReactDOM.render(<App />, document.getElementById('app'));

apps/demos/Demos/Charts/ServerSideDataProcessing/ReactJs/App.js

@@ -1,5 +1,5 @@
-import React from "react";
-import { DataSource } from "devextreme-react/common/data";
+import React from 'react';
+import { DataSource } from 'devextreme-react/common/data';
 import Chart, {
   ValueAxis,
   ArgumentAxis,
@@ -13,9 +13,10 @@ import Chart, {
   Tooltip,
   Export,
   LoadingIndicator,
-} from "devextreme-react/chart";
-import SelectBox from "devextreme-react/select-box";
-import { months, monthLabel } from "./data.js";
+} from 'devextreme-react/chart';
+import SelectBox from 'devextreme-react/select-box';
+import { months, monthLabel } from './data.js';
+
 const year = 2017;
 let selectedMonth = 1;
 const startOfMonthStr = (month) => `${month}/01/${year}`;
@@ -26,16 +27,15 @@ const endOfMonthStr = (month) => {
   return `${month}/${lastDay}/${year}`;
 };
 const chartDataSource = new DataSource({
-  key: "Date",
+  key: 'Date',
   load: () => {
     const startVisible = startOfMonthStr(selectedMonth);
     const endVisible = endOfMonthStr(selectedMonth);
-    const url =
-      "https://js.devexpress.com/Demos/NetCore/api/TemperatureData" +
-      `?startVisible=${encodeURIComponent(startVisible)}` +
-      `&endVisible=${encodeURIComponent(endVisible)}` +
-      `&startBound=${encodeURIComponent(startVisible)}` +
-      `&endBound=${encodeURIComponent(endVisible)}`;
+    const url = 'https://js.devexpress.com/Demos/NetCore/api/TemperatureData'
+      + `?startVisible=${encodeURIComponent(startVisible)}`
+      + `&endVisible=${encodeURIComponent(endVisible)}`
+      + `&startBound=${encodeURIComponent(startVisible)}`
+      + `&endBound=${encodeURIComponent(endVisible)}`;
     return fetch(url)
       .then((r) => {
         if (!r.ok) throw new Error(`Network response fails: ${r.status}`);
@@ -46,8 +46,7 @@ const chartDataSource = new DataSource({
           ...item,
           Temperature: (item.MinTemp + item.MaxTemp) / 2,
           Date: new Date(item.Date),
-        }))
-      );
+        })));
   },
   paginate: false,
 });
@@ -56,14 +55,14 @@ function onValueChanged(data) {
   chartDataSource.load();
 }
 function customizeLabel(e) {
-  return `${e.valueText}${"&#176C"}`;
+  return `${e.valueText}${'&#176C'}`;
 }
 function customizeArgumentAxisLabel(e) {
   return new Date(e.value).getDate().toString();
 }
 function customizeTooltip(arg) {
   return {
-    text: `${arg.valueText}${"&#176C"}`,
+    text: `${arg.valueText}${'&#176C'}`,
   };
 }
 function App() {

apps/demos/Demos/Charts/ServerSideDataProcessing/ReactJs/data.js

@@ -1,51 +1,51 @@
 export const months = [
   {
     id: 1,
-    name: "January",
+    name: 'January',
   },
   {
     id: 2,
-    name: "February",
+    name: 'February',
   },
   {
     id: 3,
-    name: "March",
+    name: 'March',
   },
   {
     id: 4,
-    name: "April",
+    name: 'April',
   },
   {
     id: 5,
-    name: "May",
+    name: 'May',
   },
   {
     id: 6,
-    name: "June",
+    name: 'June',
   },
   {
     id: 7,
-    name: "July",
+    name: 'July',
   },
   {
     id: 8,
-    name: "August",
+    name: 'August',
   },
   {
     id: 9,
-    name: "September",
+    name: 'September',
   },
   {
     id: 10,
-    name: "October",
+    name: 'October',
   },
   {
     id: 11,
-    name: "November",
+    name: 'November',
   },
   {
     id: 12,
-    name: "December",
+    name: 'December',
   },
 ];
-export const monthLabel = { "aria-label": "Month" };
+export const monthLabel = { 'aria-label': 'Month' };

apps/demos/Demos/Charts/ServerSideDataProcessing/ReactJs/index.js

@@ -1,4 +1,5 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App.js";
-ReactDOM.render(<App />, document.getElementById("app"));
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App.js';
+
+ReactDOM.render(<App />, document.getElementById('app'));