Charts: transfer demos to TS (#2853)

* create typestat config

* Run typestat for the first time (js->ts extensions) and first type infer

* Fix file extensions

* update typestat config and infer types 2nd time

* Revert accidental change in tsconfig

* lint fix errors

* handwork: removing ts errors part 1

* handwork: removing ts errors part 2

* handwork: removing ts errors part 3 Final

* Remove useless types, other type improves

* Fix deprecated border attribute + some ts errors that was not in App.js

* Generate JS code

* Fix bad generated quotes in ReactJs

* add converter.tsconfig to gitignore + more reactjs fix

* Fix generated css newline after space

* Fix lint errors

* Temporarily add eslint-ingnore for 1 line (false positive no-unused-vars rule)

* Remove any from types

* Fix colorization + fix palette + fix js generated

* Fix TilingAlgorithms setState error

* Fix API display tooltip

* Fix API display pointclick event

* Remove IXXProps part1

* Remove onXXProps part 2

* fix styles lint

* Fix generate js errors

* Try to Fix Palette

* Fix missed conditional operator + try to fix palette

* Add import * as temporary workaround for palette

* Update etalon

* Change paletteExtensionModes in all frameworks to match new screenshot

* Palette make work locally

.gitignore

@@ -15,6 +15,7 @@ NuGet
 *.ldf
 *proj.user
 repository.config.json
+converter.tsconfig.json
 coverage
 artifacts
 screenshots

JSDemos/Demos/Charts/APIDisplayATooltip/React/App.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import PieChart, {
+  Series, Tooltip, Size, Legend, PieChartTypes,
+} from 'devextreme-react/pie-chart';
+import { SelectBox } from 'devextreme-react/select-box';
+import { populationData, regionLabel } from './data.ts';
+
+const customizeTooltip = (pointInfo) => ({
+  text: `${pointInfo.argumentText}<br/>${pointInfo.valueText}`,
+});
+
+function App() {
+  const [selectedRegion, setSelectedRegion] = React.useState(null);
+  const pieChartRef = React.useRef<PieChart>(null);
+
+  const showTooltip = React.useCallback((point) => {
+    point.showTooltip();
+    setSelectedRegion(point.argument);
+  }, [setSelectedRegion]);
+
+  const onPointClick = React.useCallback(({ target: point }: PieChartTypes.PointClickEvent) => {
+    showTooltip(point);
+  }, [showTooltip]);
+
+  const onRegionChanged = React.useCallback(({ value }) => {
+    const point = pieChartRef.current.instance.getAllSeries()[0].getPointsByArg(value)[0];
+    showTooltip(point);
+  }, [showTooltip]);
+
+  return (
+    <React.Fragment>
+      <PieChart
+        ref={pieChartRef}
+        dataSource={populationData}
+        onPointClick={onPointClick}
+        type="doughnut"
+        palette="Soft Pastel"
+        title="The Population of Continents and Regions"
+      >
+        <Series argumentField="region" />
+        <Size height={350} />
+        <Tooltip
+          enabled={false}
+          format="millions"
+          customizeTooltip={customizeTooltip}
+        />
+        <Legend visible={false} />
+      </PieChart>
+      <div className="controls-pane">
+        <SelectBox
+          width={250}
+          dataSource={populationData}
+          inputAttr={regionLabel}
+          displayExpr="region"
+          valueExpr="region"
+          placeholder="Choose region"
+          value={selectedRegion}
+          onValueChanged={onRegionChanged}
+        />
+      </div>
+    </React.Fragment>
+  );
+}
+
+export default App;

JSDemos/Demos/Charts/APIDisplayATooltip/React/index.html

@@ -12,7 +12,7 @@
     <script src="../../../../../node_modules/systemjs/dist/system.js"></script>
     <script type="text/javascript" src="config.js"></script>
     <script type="text/javascript">
-      System.import("./index.js");
+      System.import("./index.tsx");
     </script>
   </head>
 

JSDemos/Demos/Charts/APIDisplayATooltip/React/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './App.tsx';
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('app'),
+);

JSDemos/Demos/Charts/APIDisplayATooltip/ReactJs/App.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import PieChart, {
+  Series, Tooltip, Size, Legend,
+} from 'devextreme-react/pie-chart';
+import { SelectBox } from 'devextreme-react/select-box';
+import { populationData, regionLabel } from './data.js';
+
+const customizeTooltip = (pointInfo) => ({
+  text: `${pointInfo.argumentText}<br/>${pointInfo.valueText}`,
+});
+function App() {
+  const [selectedRegion, setSelectedRegion] = React.useState(null);
+  const pieChartRef = React.useRef(null);
+  const showTooltip = React.useCallback(
+    (point) => {
+      point.showTooltip();
+      setSelectedRegion(point.argument);
+    },
+    [setSelectedRegion],
+  );
+  const onPointClick = React.useCallback(
+    ({ target: point }) => {
+      showTooltip(point);
+    },
+    [showTooltip],
+  );
+  const onRegionChanged = React.useCallback(
+    ({ value }) => {
+      const point = pieChartRef.current.instance.getAllSeries()[0].getPointsByArg(value)[0];
+      showTooltip(point);
+    },
+    [showTooltip],
+  );
+  return (
+    <React.Fragment>
+      <PieChart
+        ref={pieChartRef}
+        dataSource={populationData}
+        onPointClick={onPointClick}
+        type="doughnut"
+        palette="Soft Pastel"
+        title="The Population of Continents and Regions"
+      >
+        <Series argumentField="region" />
+        <Size height={350} />
+        <Tooltip
+          enabled={false}
+          format="millions"
+          customizeTooltip={customizeTooltip}
+        />
+        <Legend visible={false} />
+      </PieChart>
+      <div className="controls-pane">
+        <SelectBox
+          width={250}
+          dataSource={populationData}
+          inputAttr={regionLabel}
+          displayExpr="region"
+          valueExpr="region"
+          placeholder="Choose region"
+          value={selectedRegion}
+          onValueChanged={onRegionChanged}
+        />
+      </div>
+    </React.Fragment>
+  );
+}
+export default App;

JSDemos/Demos/Charts/APIDisplayATooltip/ReactJs/data.js

@@ -0,0 +1,27 @@
+export const populationData = [
+  {
+    region: 'Asia',
+    val: 4119626293,
+  },
+  {
+    region: 'Africa',
+    val: 1012956064,
+  },
+  {
+    region: 'Northern America',
+    val: 344124520,
+  },
+  {
+    region: 'Latin America and the Caribbean',
+    val: 590946440,
+  },
+  {
+    region: 'Europe',
+    val: 727082222,
+  },
+  {
+    region: 'Oceania',
+    val: 35104756,
+  },
+];
+export const regionLabel = { 'aria-label': 'Region' };

JSDemos/Demos/Charts/APIDisplayATooltip/ReactJs/index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>DevExtreme Demo</title>
+    <meta
+      http-equiv="X-UA-Compatible"
+      content="IE=edge"
+    />
+    <meta
+      http-equiv="Content-Type"
+      content="text/html; charset=utf-8"
+    />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../../../../node_modules/devextreme-dist/css/dx.light.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="styles.css"
+    />
+
+    <script src="../../../../../node_modules/core-js/client/shim.min.js"></script>
+    <script src="../../../../../node_modules/systemjs/dist/system.js"></script>
+    <script
+      type="text/javascript"
+      src="config.js"
+    ></script>
+    <script type="text/javascript">
+      System.import("./index.js");
+    </script>
+  </head>
+
+  <body class="dx-viewport">
+    <div class="demo-container">
+      <div id="app"></div>
+    </div>
+  </body>
+</html>

JSDemos/Demos/Charts/APIDisplayATooltip/ReactJs/index.js

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

JSDemos/Demos/Charts/APIDisplayATooltip/ReactJs/styles.css

@@ -0,0 +1,8 @@
+.controls-pane {
+  margin-top: 20px;
+  text-align: center;
+}
+
+.dx-selectbox {
+  display: inline-block;
+}