2 files changed, 63 insertions, 0 deletions
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index d7ddbab..6687fbb 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import ContentHeader from './ContentHeader';
 import s0 from './Home.module.scss';
 import Loading from './Loading';
+import MemoryChart from './MemoryChart';
 import TrafficChart from './TrafficChart';
 import TrafficNow from './TrafficNow';
 
@@ -19,6 +20,7 @@ export default function Home() {
         <div className={s0.chart}>
           <Suspense fallback={<Loading height="200px" />}>
             <TrafficChart />
+            <MemoryChart />
           </Suspense>
         </div>
       </div>
diff --git a/src/components/MemoryChart.tsx b/src/components/MemoryChart.tsx
new file mode 100644
index 0000000..9f6febb
--- /dev/null
+++ b/src/components/MemoryChart.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { State } from '~/store/types';
+
+import { fetchData } from '../api/memory';
+import { useLineChartMemory } from '../hooks/useLineChart';
+import {
+  chartJSResource,
+  chartStyles,
+  commonDataSetProps,
+  memoryChartOptions,
+} from '../misc/chart-memory';
+import { getClashAPIConfig, getSelectedChartStyleIndex } from '../store/app';
+import { connect } from './StateProvider';
+
+const { useMemo } = React;
+
+const chartWrapperStyle = {
+  // make chartjs chart responsive
+  position: 'relative',
+  maxWidth: 1000,
+  marginTop: '1em',
+};
+
+const mapState = (s: State) => ({
+  apiConfig: getClashAPIConfig(s),
+  selectedChartStyleIndex: getSelectedChartStyleIndex(s),
+});
+
+export default connect(mapState)(MemoryChart);
+
+function MemoryChart({ apiConfig, selectedChartStyleIndex }) {
+  const ChartMod = chartJSResource.read();
+  const memory = fetchData(apiConfig);
+  const { t } = useTranslation();
+  const data = useMemo(
+    () => ({
+      labels: memory.labels,
+      datasets: [
+        {
+          ...commonDataSetProps,
+          ...memoryChartOptions,
+          ...chartStyles[selectedChartStyleIndex].inuse,
+          label: t('Memory'),
+          data: memory.inuse,
+        },
+      ],
+    }),
+    [memory, selectedChartStyleIndex, t]
+  );
+
+  useLineChartMemory(ChartMod.Chart, 'MemoryChart', data, memory);
+
+  return (
+    // @ts-expect-error ts-migrate(2322) FIXME: Type '{ position: string; maxWidth: number; }' is ... Remove this comment to see the full error message
+    <div style={chartWrapperStyle}>
+      <canvas id="MemoryChart" />
+    </div>
+  );
+}