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,13 +13,12 @@ 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 = {
@@ -32,7 +31,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()) {
@@ -123,14 +122,14 @@ const onVisualRangeChanged = (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,5 +1,4 @@
-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,10 +13,9 @@ 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}`;
@@ -27,12 +26,12 @@ 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' +
+      "https://js.devexpress.com/Demos/NetCore/api/TemperatureData" +
       `?startVisible=${encodeURIComponent(startVisible)}` +
       `&endVisible=${encodeURIComponent(endVisible)}` +
       `&startBound=${encodeURIComponent(startVisible)}` +
@@ -47,7 +46,7 @@ const chartDataSource = new DataSource({
           ...item,
           Temperature: (item.MinTemp + item.MaxTemp) / 2,
           Date: new Date(item.Date),
-        })),
+        }))
       );
   },
   paginate: false,
@@ -57,14 +56,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,5 +1,4 @@
-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"));