"use strict";

src/interface/components/Superescalar/tab/StatsTabComponent.tsx

@@ -1,11 +1,13 @@
+"use strict";
 import * as React from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { bindActionCreators } from "redux";
+import { AnyAction, Dispatch, bindActionCreators } from "redux";
 
 import ReactECharts from "echarts-for-react";
+import { GlobalState } from "../../../reducers";
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state: GlobalState) => {
   return {
     commited: state.Machine.stats.commited,
     discarded: state.Machine.stats.discarded,
@@ -18,7 +20,7 @@ const mapStateToProps = (state) => {
   };
 };
 
-const mapDispatchToProps = (dispatch) => {
+const mapDispatchToProps = (dispatch: Dispatch<AnyAction>) => {
   return {
     actions: bindActionCreators({}, dispatch),
   };
@@ -89,7 +91,7 @@ export const StatsTabComponent: React.FC = (
 
               series:
                 props.statusesCount &&
-                Array.from(props.statusesCount.keys()).map((statusName) => {
+                Array.from(props.statusesCount.keys()).map((statusName: string) => {
                   return {
                     name: props.t("stats.statuses." + statusName),
                     type: "bar",
@@ -165,13 +167,13 @@ export const StatsTabComponent: React.FC = (
 
               series:
                 props.unitsOcupation &&
-                Array.from(props.unitsOcupation.keys()).map((unitName) => {
+                Array.from(props.unitsOcupation.keys()).map((unitName: string) => {
                   return {
                     name: props.t("stats.units." + unitName),
                     type: "line",
                     data: props.unitsOcupation
                       .get(unitName)
-                      .map((value) => value * 100),
+                      .map((value: number) => value * 100),
                   };
                 }),
             }}
@@ -285,7 +287,7 @@ export const StatsTabComponent: React.FC = (
             </thead>
             <tbody>
               {props.instrCommitPercentage &&
-                props.instrCommitPercentage.map((d) => (
+                props.instrCommitPercentage.map((d: { name: string; value: number; }) => (
                   <tr key={d.name}>
                     <th scope="row">{d.name}</th>
                     <td>{props.code[d.name].toString()}</td>

src/interface/components/VLIW/tab/StatsTabComponent.tsx

@@ -1,44 +1,108 @@
+"use strict";
 import * as React from "react";
-import { withTranslation } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { bindActionCreators } from "redux";
+import { AnyAction, Dispatch, bindActionCreators } from "redux";
 
 import ReactECharts from "echarts-for-react";
 
-export class StatsTabComponent extends React.Component<any, any> {
-  constructor(props: any) {
-    super(props);
-  }
+type StatsTabComponentProps = WithTranslation &
+  ReturnType<typeof mapStateToProps> &
+  ReturnType<typeof mapDispatchToProps>;
+
+export const StatsTabComponent: React.FC = (
+  props: StatsTabComponentProps
+): React.ReactNode => {
+  return (
+    <div className="container text-center">
+      <div className="row">
+        <div className="col">
+          <ReactECharts
+            style={{
+              height: "25rem",
+              width: "100%",
+            }}
+            option={{
+              title: {
+                text: props.t("stats.unitsOcupation"),
+                left: "center",
+              },
+
+              legend: {
+                top: "bottom",
+              },
+
+              toolbox: {
+                feature: {
+                  saveAsImage: {},
+                  dataView: {
+                    readOnly: true,
+                    lang: [
+                      props.t("stats.toolbox.dataView"),
+                      props.t("stats.toolbox.close"),
+                      props.t("stats.toolbox.refresh"),
+                    ],
+                  },
+                },
+              },
+
+              tooltip: {
+                trigger: "axis",
+                axisPointer: {
+                  type: "cross",
+                },
+              },
 
-  render() {
-    return (
-      <div className="container text-center">
-        <div className="row">
-          <div className="col">
+              xAxis: {
+                type: "category",
+              },
+
+              yAxis: {
+                type: "value",
+                max: 100,
+                axisLabel: {
+                  formatter: "{value}%",
+                },
+              },
+
+              series:
+                props.unitsOcupation &&
+                Array.from(props.unitsOcupation.keys()).map((unitName) => {
+                  return {
+                    name: props.t("stats.units." + unitName),
+                    type: "line",
+                    data: props.unitsOcupation
+                      .get(unitName)
+                      .map((value: number) => value * 100),
+                  };
+                }),
+            }}
+          />
+        </div>
+      </div>
+      <div className="row">
+        <div className="col">
+          {props.cyclesPerReplication.length > 0 && (
             <ReactECharts
               style={{
-                height: "25rem",
+                height: "13rem",
                 width: "100%",
               }}
               option={{
                 title: {
-                  text: this.props.t("stats.unitsOcupation"),
+                  text: props.t("stats.cycles"),
                   left: "center",
                 },
 
-                legend: {
-                  top: "bottom",
-                },
-
                 toolbox: {
                   feature: {
                     saveAsImage: {},
                     dataView: {
                       readOnly: true,
                       lang: [
-                        this.props.t("stats.toolbox.dataView"),
-                        this.props.t("stats.toolbox.close"),
-                        this.props.t("stats.toolbox.refresh"),
+                        props.t("stats.toolbox.dataView"),
+                        props.t("stats.toolbox.close"),
+                        props.t("stats.toolbox.refresh"),
                       ],
                     },
                   },
@@ -57,86 +121,21 @@ export class StatsTabComponent extends React.Component<any, any> {
 
                 yAxis: {
                   type: "value",
-                  max: 100,
-                  axisLabel: {
-                    formatter: "{value}%",
-                  },
                 },
 
-                series:
-                  this.props.unitsOcupation &&
-                  Array.from(this.props.unitsOcupation.keys()).map(
-                    (unitName) => {
-                      return {
-                        name: this.props.t("stats.units." + unitName),
-                        type: "line",
-                        data: this.props.unitsOcupation
-                          .get(unitName)
-                          .map((value) => value * 100),
-                      };
-                    }
-                  ),
+                series: {
+                  name: props.t("stats.cycles"),
+                  type: "line",
+                  data: props.cyclesPerReplication,
+                },
               }}
             />
-          </div>
-        </div>
-        <div className="row">
-          <div className="col">
-            {this.props.cyclesPerReplication.length > 0 && (
-              <ReactECharts
-                style={{
-                  height: "13rem",
-                  width: "100%",
-                }}
-                option={{
-                  title: {
-                    text: this.props.t("stats.cycles"),
-                    left: "center",
-                  },
-
-                  toolbox: {
-                    feature: {
-                      saveAsImage: {},
-                      dataView: {
-                        readOnly: true,
-                        lang: [
-                          this.props.t("stats.toolbox.dataView"),
-                          this.props.t("stats.toolbox.close"),
-                          this.props.t("stats.toolbox.refresh"),
-                        ],
-                      },
-                    },
-                  },
-
-                  tooltip: {
-                    trigger: "axis",
-                    axisPointer: {
-                      type: "cross",
-                    },
-                  },
-
-                  xAxis: {
-                    type: "category",
-                  },
-
-                  yAxis: {
-                    type: "value",
-                  },
-
-                  series: {
-                    name: this.props.t("stats.cycles"),
-                    type: "line",
-                    data: this.props.cyclesPerReplication,
-                  },
-                }}
-              />
-            )}
-          </div>
+          )}
         </div>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
 const mapStateToProps = (state) => {
   return {
@@ -151,7 +150,7 @@ const mapStateToProps = (state) => {
   };
 };
 
-const mapDispatchToProps = (dispatch) => {
+const mapDispatchToProps = (dispatch: Dispatch<AnyAction>) => {
   return {
     actions: bindActionCreators({}, dispatch),
   };

src/interface/reducers/color.ts

@@ -1,6 +1,6 @@
 import { COLOR_CELL } from "../actions";
 
-const initialState = {
+export const initialState = {
     uuidColors: {},
     IidColors: {}
 }

src/interface/reducers/index.ts

@@ -1,12 +1,12 @@
 import { combineReducers } from 'redux'
-import { MachineReducers } from './machine'
-import { UiReducers } from './ui'
-import { ColorReducers } from './color'
+import { MachineReducers, initialState as machineInitialState } from './machine'
+import { UiReducers, initialState as uiInitialState } from './ui'
+import { ColorReducers, initialState as colorsInitialState } from './color'
 
 export interface GlobalState {
-    Machine: typeof MachineReducers,
-    Ui: typeof UiReducers,
-    Colors: typeof ColorReducers
+    Machine: typeof machineInitialState,
+    Ui: typeof uiInitialState,
+    Colors: typeof colorsInitialState
 }
 
 export default combineReducers({

src/interface/reducers/ui.ts

@@ -15,7 +15,7 @@ import {
     SET_CYCLES_PER_REPLICATION
 } from '../actions/stats-actions';
 
-const initialState = {
+export const initialState = {
     isLoadModalOpen: false,
     isAuthorModalOpen: false,
     isOptionsModalOpen: false,

src/stats/aggregator.ts

@@ -1,3 +1,4 @@
+"use strict";
 import { Stats, InstructionStatsEntry } from "./stats";
 
 export interface StatEntry {
@@ -105,7 +106,7 @@ export class StatsAgregator {
       }
     }
 
-    for (let [key, value] of result) {
+    for (let [, value] of result) {
       for (let prop in value) {
         if (value.hasOwnProperty(prop)) {
           value[prop] = value[prop] / this._stats.length;

src/stats/stats.ts

@@ -1,3 +1,4 @@
+"use strict";
 export interface InstructionStatsEntry {
   instructionId: number;