TSify most of ReactViews/Custom/Chart

lib/ReactViews/Custom/Chart/ChartPanel.jsx → lib/ReactViews/Custom/Chart/ChartPanel.tsx

@@ -1,35 +1,34 @@
-"use strict";
-
 import { computed, makeObservable } from "mobx";
 import { observer } from "mobx-react";
-import PropTypes from "prop-types";
 import React from "react";
-import { withTranslation } from "react-i18next";
+import { type TFunction, withTranslation } from "react-i18next";
 import defined from "terriajs-cesium/Source/Core/defined";
-import ChartView from "../../../Charts/ChartView.ts";
+import ChartView from "../../../Charts/ChartView";
 import Result from "../../../Core/Result";
 import MappableMixin from "../../../ModelMixins/MappableMixin";
 import Icon from "../../../Styled/Icon";
 import Loader from "../../Loader";
 import Chart from "./BottomDockChart";
 import Styles from "./chart-panel.scss";
 import { ChartPanelDownloadButton } from "./ChartPanelDownloadButton";
+import type Terria from "../../../Models/Terria";
+import ViewState from "../../../ReactViewModels/ViewState";
+
+interface ChartPanelProps {
+  terria: Terria;
+  onHeightChange?: any; // func
+  viewState: ViewState;
+  animationDuration?: number;
+  t: TFunction;
+}
 
 const height = 300;
 
 @observer
-class ChartPanel extends React.Component {
+class ChartPanel extends React.Component<ChartPanelProps> {
   static displayName = "ChartPanel";
 
-  static propTypes = {
-    terria: PropTypes.object.isRequired,
-    onHeightChange: PropTypes.func,
-    viewState: PropTypes.object.isRequired,
-    animationDuration: PropTypes.number,
-    t: PropTypes.func.isRequired
-  };
-
-  constructor(props) {
+  constructor(props: ChartPanelProps) {
     super(props);
     makeObservable(this);
   }
@@ -80,7 +79,7 @@ class ChartPanel extends React.Component {
       Promise.all(
         items
           .filter((item) => MappableMixin.isMixedInto(item))
-          .map((item) => item.loadMapItems())
+          .map((item: any) => item.loadMapItems())
       ).then((results) =>
         Result.combine(results, {
           message: "Failed to load chart items",
@@ -102,7 +101,9 @@ class ChartPanel extends React.Component {
       <div className={Styles.holder}>
         <div className={Styles.inner}>
           <div className={Styles.chartPanel} style={{ height: height }}>
-            <div className={Styles.body}>
+            <div // @ts-expect-error No Styles.body defined.
+              className={Styles.body}
+            >
               <div className={Styles.header}>
                 <label className={Styles.sectionLabel}>
                   {loader || t("chart.sectionLabel")}

lib/ReactViews/Custom/Chart/LineChart.tsx

@@ -0,0 +1,51 @@
+import { LinePath } from "@visx/shape";
+import { line } from "d3-shape";
+import React from "react";
+import { observer } from "mobx-react";
+import { makeObservable } from "mobx";
+
+type ItemType = any;
+
+interface LineChartProps {
+  id: string;
+  chartItem: ItemType;
+  scales: { x: (p: number) => number; y: (p: number) => number };
+  color?: string;
+}
+
+@observer
+class LineChart extends React.PureComponent<LineChartProps> {
+  constructor(props: LineChartProps) {
+    super(props);
+    makeObservable(this);
+  }
+
+  doZoom(scales: any) {
+    const el = document.querySelector(`#${this.props.id} path`);
+    if (!el) return;
+    const { chartItem } = this.props;
+    const area = line()
+      .x((p: any) => scales.x(p.x))
+      .y((p: any) => scales.y(p.y))(chartItem.points);
+    if (!area) return;
+    el.setAttribute("d", area);
+  }
+
+  render() {
+    const { chartItem, scales, color } = this.props;
+    const stroke = color || chartItem.getColor();
+    return (
+      <g id={this.props.id}>
+        <LinePath
+          data={chartItem.points}
+          x={(p: any) => scales.x(p.x)}
+          y={(p: any) => scales.y(p.y)}
+          stroke={stroke}
+          strokeWidth={2}
+        />
+      </g>
+    );
+  }
+}
+
+export default LineChart;

lib/ReactViews/Custom/Chart/MomentLinesChart.jsx → lib/ReactViews/Custom/Chart/MomentLinesChart.tsx

@@ -1,17 +1,23 @@
 import { observer } from "mobx-react";
+import { makeObservable } from "mobx";
 import { Line } from "@visx/shape";
-import PropTypes from "prop-types";
 import React from "react";
+import { ChartItem } from "../../../ModelMixins/ChartableMixin";
+
+interface MomentLinesProps {
+  id: string;
+  chartItem: ChartItem;
+  scales: any;
+}
 
 @observer
-class MomentLines extends React.Component {
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-    chartItem: PropTypes.object.isRequired,
-    scales: PropTypes.object.isRequired
-  };
+class MomentLines extends React.Component<MomentLinesProps> {
+  constructor(props: MomentLinesProps) {
+    super(props);
+    makeObservable(this);
+  }
 
-  doZoom(scales) {
+  doZoom(scales: any) {
     const lines = document.querySelectorAll(`g#${this.props.id} line`);
     lines.forEach((line, i) => {
       const point = this.props.chartItem.points[i];

lib/ReactViews/Custom/Chart/MomentPointsChart.jsx → lib/ReactViews/Custom/Chart/MomentPointsChart.tsx

@@ -2,27 +2,27 @@ import { scaleLinear } from "@visx/scale";
 import { interpolateNumber as d3InterpolateNumber } from "d3-interpolate";
 import { computed, makeObservable } from "mobx";
 import { observer } from "mobx-react";
-import PropTypes from "prop-types";
 import React from "react";
 import Glyphs from "./Glyphs";
 import { GlyphCircle } from "@visx/glyph";
+import { ChartItem } from "../../../ModelMixins/ChartableMixin";
 
-@observer
-class MomentPointsChart extends React.Component {
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-    chartItem: PropTypes.object.isRequired,
-    basisItem: PropTypes.object,
-    basisItemScales: PropTypes.object,
-    scales: PropTypes.object.isRequired,
-    glyph: PropTypes.string
-  };
+interface MomentPointsChartProps {
+  id: string;
+  chartItem: ChartItem;
+  basisItem?: any; // object
+  basisItemScales?: any; // object
+  scales: any; // object
+  glyph: keyof typeof Glyphs;
+}
 
+@observer
+class MomentPointsChart extends React.Component<MomentPointsChartProps> {
   static defaultProps = {
     glyph: "circle"
   };
 
-  constructor(props) {
+  constructor(props: MomentPointsChartProps) {
     super(props);
     makeObservable(this);
   }
@@ -38,31 +38,30 @@ class MomentPointsChart extends React.Component {
         domain: basisItemScales.y.domain(),
         range: scales.y.domain()
       });
-      const interpolatedPoints = chartItem.points.map((p) => ({
+      return chartItem.points.map((p) => ({
         ...p,
         ...interpolate(p, basisItem.points, basisToSourceScale)
       }));
-      return interpolatedPoints;
     }
     return chartItem.points;
   }
 
-  doZoom(scales) {
+  doZoom(scales: any) {
     const points = this.points;
     if (points.length === 0) {
       return;
     }
     const glyphs = document.querySelectorAll(
       `g#${this.props.id} > g.visx-glyph`
     );
-    glyphs.forEach((glyph, i) => {
+    glyphs.forEach((glyph: Element, i: number) => {
       const point = points[i];
       if (point) {
         const left = scales.x(point.x);
         const top = scales.y(point.y);
         const scale = point.isSelected ? "scale(1.4, 1.4)" : "";
         glyph.setAttribute("transform", `translate(${left}, ${top}) ${scale}`);
-        glyph.setAttribute("fill-opacity", point.isSelected ? 1.0 : 0.3);
+        glyph.setAttribute("fill-opacity", point.isSelected ? "1.0" : "0.3");
       }
     });
   }
@@ -72,7 +71,7 @@ class MomentPointsChart extends React.Component {
     const baseKey = `moment-point-${chartItem.categoryName}-${chartItem.name}`;
     const fillColor = chartItem.getColor();
     const isClickable = chartItem.onClick !== undefined;
-    const clickProps = (point) => {
+    const clickProps = (point: any) => {
       if (isClickable) {
         return {
           pointerEvents: "all",
@@ -106,7 +105,11 @@ class MomentPointsChart extends React.Component {
  * The source point and `sortedBasisPoints` may be of different scale, so we use `basisToSourceScale`
  * to generate a point in the original source items scale.
  */
-function interpolate({ x, y }, sortedBasisPoints, basisToSourceScale) {
+function interpolate(
+  { x, y }: { x: any; y: any },
+  sortedBasisPoints: any[],
+  basisToSourceScale: any
+) {
   const closest = closestPointIndex(x, sortedBasisPoints);
   if (closest === undefined) {
     return { x, y };
@@ -131,7 +134,7 @@ function interpolate({ x, y }, sortedBasisPoints, basisToSourceScale) {
   return interpolated;
 }
 
-function closestPointIndex(x, sortedPoints) {
+function closestPointIndex(x: any, sortedPoints: any[]) {
   for (let i = 0; i < sortedPoints.length; i++) {
     if (sortedPoints[i].x.getTime() >= x.getTime()) {
       if (i === 0) return 0;