Upgrade chart.js

9 files changed, 52 insertions, 69 deletions

diff --git a/src/components/Connections.tsx b/src/components/Connections.tsx
index 2c82fa6..435345b 100644
--- a/src/components/Connections.tsx
+++ b/src/components/Connections.tsx
@@ -88,7 +88,7 @@ function formatConnectionDataItem(
     download,
     start: now - new Date(start).valueOf(),
     chains: chains.reverse().join(' / '),
-    rule: (rulePayload == null | rulePayload === '') ? rule : (`${rule}(${rulePayload})`),
+    rule: !rulePayload ? rule : `${rule}(${rulePayload})`,
     ...metadata,
     host: `${host2}:${destinationPort}`,
     type: `${type}(${network})`,
diff --git a/src/components/Root.tsx b/src/components/Root.tsx
index f94d2a2..d4a8aa0 100644
--- a/src/components/Root.tsx
+++ b/src/components/Root.tsx
@@ -3,9 +3,9 @@ import '@fontsource/roboto-mono/latin-400.css';
 import '@fontsource/open-sans/latin-400.css';
 import '@fontsource/open-sans/latin-700.css';
 
-import React, { lazy, Suspense } from 'react';
+import * as React from 'react';
 import { QueryClientProvider } from 'react-query';
-import { PartialRouteObject } from 'react-router';
+import { RouteObject } from 'react-router';
 import { HashRouter as Router, useRoutes } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
 import { About } from 'src/components/about/About';
@@ -24,6 +24,8 @@ import SideBar from './SideBar';
 import StateProvider from './StateProvider';
 import StyleGuide from './StyleGuide';
 
+const { lazy, Suspense } = React;
+
 const Connections = lazy(() => import('./Connections'));
 const Config = lazy(() => import('./Config'));
 const Logs = lazy(() => import('./Logs'));
@@ -38,10 +40,8 @@ const routes = [
   { path: '/proxies', element: <Proxies /> },
   { path: '/rules', element: <Rules /> },
   { path: '/about', element: <About /> },
-  process.env.NODE_ENV === 'development'
-    ? { path: '/style', element: <StyleGuide /> }
-    : false,
-].filter(Boolean) as PartialRouteObject[];
+  process.env.NODE_ENV === 'development' ? { path: '/style', element: <StyleGuide /> } : false,
+].filter(Boolean) as RouteObject[];
 
 function RouteInnerApp() {
   return useRoutes(routes);
diff --git a/src/components/Rules.tsx b/src/components/Rules.tsx
index 9019fab..47644e7 100644
--- a/src/components/Rules.tsx
+++ b/src/components/Rules.tsx
@@ -20,7 +20,13 @@ const { memo } = React;
 
 const paddingBottom = 30;
 
-function itemKey(index: number, { rules, provider }) {
+type ItemData = {
+  rules: any[];
+  provider: any;
+  apiConfig: ClashAPIConfig;
+};
+
+function itemKey(index: number, { rules, provider }: ItemData) {
   const providerQty = provider.names.length;
 
   if (index < providerQty) {
@@ -88,10 +94,8 @@ function Rules({ apiConfig }: RulesProps) {
         <ContentHeader title={t('Rules')} />
         <TextFilter placeholder="Filter" textAtom={ruleFilterText} />
       </div>
-      {/* @ts-expect-error ts-migrate(2322) FIXME: Type 'number | MutableRefObject<any>' is not assig... Remove this comment to see the full error message */}
       <div ref={refRulesContainer} style={{ paddingBottom }}>
         <VariableSizeList
-          // @ts-expect-error ts-migrate(2362) FIXME: The left-hand side of an arithmetic operation must... Remove this comment to see the full error message
           height={containerHeight - paddingBottom}
           width="100%"
           itemCount={rules.length + provider.names.length}
diff --git a/src/components/StateProvider.tsx b/src/components/StateProvider.tsx
index 6769108..1ef48d7 100644
--- a/src/components/StateProvider.tsx
+++ b/src/components/StateProvider.tsx
@@ -6,16 +6,8 @@ import React from 'react';
 // this is just workaround
 immer.setAutoFreeze(false);
 
-const {
-  createContext,
-  memo,
-  useMemo,
-  useRef,
-  useEffect,
-  useCallback,
-  useContext,
-  useState,
-} = React;
+const { createContext, memo, useMemo, useRef, useEffect, useCallback, useContext, useState } =
+  React;
 
 export { immer };
 
@@ -46,7 +38,7 @@ export default function Provider({ initialState, actions = {}, children }) {
     }
   }, [getState]);
   const dispatch = useCallback(
-    (actionId, fn) => {
+    (actionId: string | ((a: any, b: any) => any), fn: (s: any) => void) => {
       if (typeof actionId === 'function') return actionId(dispatch, getState);
 
       const stateNext = produce(getState(), fn);
@@ -61,26 +53,21 @@ export default function Provider({ initialState, actions = {}, children }) {
     },
     [getState]
   );
-  const boundActions = useMemo(() => bindActions(actions, dispatch), [
-    actions,
-    dispatch,
-  ]);
+  const boundActions = useMemo(() => bindActions(actions, dispatch), [actions, dispatch]);
 
   return (
     <StateContext.Provider value={state}>
       <DispatchContext.Provider value={dispatch}>
-        <ActionsContext.Provider value={boundActions}>
-          {children}
-        </ActionsContext.Provider>
+        <ActionsContext.Provider value={boundActions}>{children}</ActionsContext.Provider>
       </DispatchContext.Provider>
     </StateContext.Provider>
   );
 }
 
-export function connect(mapStateToProps) {
-  return (Component) => {
+export function connect(mapStateToProps: any) {
+  return (Component: any) => {
     const MemoComponent = memo(Component);
-    function Connected(props) {
+    function Connected(props: any) {
       const state = useContext(StateContext);
       const dispatch = useContext(DispatchContext);
       const mapped = mapStateToProps(state, props);
@@ -92,14 +79,13 @@ export function connect(mapStateToProps) {
 }
 
 // steal from https://github.com/reduxjs/redux/blob/master/src/bindActionCreators.ts
-function bindAction(action, dispatch) {
-  return function (...args) {
-    // @ts-expect-error ts-migrate(2683) FIXME: 'this' implicitly has type 'any' because it does n... Remove this comment to see the full error message
+function bindAction(action: any, dispatch: any) {
+  return function (...args: any[]) {
     return dispatch(action.apply(this, args));
   };
 }
 
-function bindActions(actions, dispatch) {
+function bindActions(actions: any, dispatch: any) {
   const boundActions = {};
   for (const key in actions) {
     const action = actions[key];
diff --git a/src/components/StyleGuide.tsx b/src/components/StyleGuide.tsx
index ec0c29b..ee38697 100644
--- a/src/components/StyleGuide.tsx
+++ b/src/components/StyleGuide.tsx
@@ -21,9 +21,7 @@ const optionsRule = [
   { label: 'Direct', value: 'Direct' },
 ];
 
-const Pane = ({ children, style }) => (
-  <div style={{ ...paneStyle, ...style }}>{children}</div>
-);
+const Pane = ({ children, style }) => <div style={{ ...paneStyle, ...style }}>{children}</div>;
 
 function useToggle(initialState = false) {
   const [onoff, setonoff] = React.useState(initialState);
@@ -52,12 +50,7 @@ class StyleGuide extends PureComponent {
         </Pane>
         {/* @ts-expect-error ts-migrate(2741) FIXME: Property 'style' is missing in type '{ children: E... Remove this comment to see the full error message */}
         <Pane>
-          <ToggleSwitch
-            name="test"
-            options={optionsRule}
-            value="Rule"
-            onChange={noop}
-          />
+          <ToggleSwitch name="test" options={optionsRule} value="Rule" onChange={noop} />
         </Pane>
         {/* @ts-expect-error ts-migrate(2741) FIXME: Property 'style' is missing in type '{ children: E... Remove this comment to see the full error message */}
         <Pane>
diff --git a/src/components/SwitchThemed.tsx b/src/components/SwitchThemed.tsx
index 7121acb..7289bd2 100644
--- a/src/components/SwitchThemed.tsx
+++ b/src/components/SwitchThemed.tsx
@@ -1,11 +1,14 @@
-import React from 'react';
-import S from 'react-switch';
+import * as React from 'react';
+import ReactSwitch from 'react-switch';
+
+import { State } from '$src/store/types';
 
 import { getTheme } from '../store/app';
 import { connect } from './StateProvider';
 
 // workaround https://github.com/vitejs/vite/issues/2139#issuecomment-802981228
-const Switch = S.default ? S.default : S;
+// @ts-ignore
+const Switch = ReactSwitch.default ? ReactSwitch.default : ReactSwitch;
 
 function SwitchThemed({ checked = false, onChange, theme, name }) {
   const offColor = theme === 'dark' ? '#393939' : '#e9e9e9';
@@ -29,6 +32,4 @@ function SwitchThemed({ checked = false, onChange, theme, name }) {
   );
 }
 
-export default connect((s) => ({
-  theme: getTheme(s),
-}))(SwitchThemed);
+export default connect((s: State) => ({ theme: getTheme(s) }))(SwitchThemed);
diff --git a/src/components/ToggleSwitch.tsx b/src/components/ToggleSwitch.tsx
index 0c84059..9eb1019 100644
--- a/src/components/ToggleSwitch.tsx
+++ b/src/components/ToggleSwitch.tsx
@@ -16,8 +16,7 @@ function ToggleSwitch({ options, value, name, onChange }: Props) {
   );
 
   const getPortionPercentage = useCallback(
-    // @ts-expect-error ts-migrate(7030) FIXME: Not all code paths return a value.
-    (idx) => {
+    (idx: number) => {
       const w = Math.floor(100 / options.length);
       if (idx === options.length - 1) {
         return 100 - options.length * w + w;
diff --git a/src/components/TrafficChart.tsx b/src/components/TrafficChart.tsx
index 056cac6..367166a 100644
--- a/src/components/TrafficChart.tsx
+++ b/src/components/TrafficChart.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { State  } from '$src/store/types';
+
 import { fetchData } from '../api/traffic';
 import useLineChart from '../hooks/useLineChart';
 import {
@@ -19,7 +21,7 @@ const chartWrapperStyle = {
   maxWidth: 1000,
 };
 
-const mapState = (s) => ({
+const mapState = (s: State) => ({
   apiConfig: getClashAPIConfig(s),
   selectedChartStyleIndex: getSelectedChartStyleIndex(s),
 });
@@ -27,7 +29,7 @@ const mapState = (s) => ({
 export default connect(mapState)(TrafficChart);
 
 function TrafficChart({ apiConfig, selectedChartStyleIndex }) {
-  const Chart = chartJSResource.read();
+  const ChartMod = chartJSResource.read();
   const traffic = fetchData(apiConfig);
   const { t } = useTranslation();
   const data = useMemo(
@@ -48,10 +50,10 @@ function TrafficChart({ apiConfig, selectedChartStyleIndex }) {
         },
       ],
     }),
-    [traffic, selectedChartStyleIndex, t]
+    [ traffic, selectedChartStyleIndex, t]
   );
 
-  useLineChart(Chart, 'trafficChart', data, traffic);
+  useLineChart(ChartMod.Chart, 'trafficChart', data, traffic);
 
   return (
     // @ts-expect-error ts-migrate(2322) FIXME: Type '{ position: string; maxWidth: number; }' is ... Remove this comment to see the full error message
diff --git a/src/components/TrafficChartSample.tsx b/src/components/TrafficChartSample.tsx
index fb9b2ee..3e0bba3 100644
--- a/src/components/TrafficChartSample.tsx
+++ b/src/components/TrafficChartSample.tsx
@@ -1,19 +1,17 @@
-import React, { useMemo } from 'react';
+import * as React from 'react';
 
 import useLineChart from '../hooks/useLineChart';
-import {
-  chartJSResource,
-  chartStyles,
-  commonDataSetProps,
-} from '../misc/chart';
+import { chartJSResource, chartStyles, commonDataSetProps } from '../misc/chart';
 
-const extraChartOptions = {
-  legend: {
-    display: false,
+const { useMemo } = React;
+
+const extraChartOptions: import('chart.js').ChartOptions<'line'> = {
+  plugins: {
+    legend: { display: false },
   },
   scales: {
-    xAxes: [{ display: false }],
-    yAxes: [{ display: false }],
+    x: { display: false, type: 'category' },
+    y: { display: false, type: 'linear' },
   },
 };
 
@@ -22,7 +20,7 @@ const data2 = [184e3, 183e3, 196e3, 182e3, 190e3, 186e3, 182e3, 189e3];
 const labels = data1;
 
 export default function TrafficChart({ id }) {
-  const Chart = chartJSResource.read();
+  const ChartMod = chartJSResource.read();
 
   const data = useMemo(
     () => ({
@@ -44,7 +42,7 @@ export default function TrafficChart({ id }) {
   );
 
   const eleId = 'chart-' + id;
-  useLineChart(Chart, eleId, data, null, extraChartOptions);
+  useLineChart(ChartMod.Chart, eleId, data, null, extraChartOptions);
 
   return (
     <div style={{ width: 100, padding: 5 }}>