added echarts-for-react package and created chart for audit logs

Author: raheeliftikhar5

client/packages/lowcoder/package.json

@@ -46,6 +46,7 @@
     "copy-to-clipboard": "^3.3.3",
     "core-js": "^3.25.2",
     "echarts": "^5.4.3",
+    "echarts-for-react": "^3.0.2",
     "echarts-wordcloud": "^2.1.0",
     "eslint4b-prebuilt-2": "^7.32.0",
     "file-saver": "^2.0.5",

client/packages/lowcoder/src/pages/setting/audit/AreaTimeChart/index.tsx

@@ -0,0 +1,68 @@
+import { StyledReactECharts } from "../auditContants";
+
+const apiUsage = [
+  { date: '2024-12-07', usage: 860 },
+  { date: '2024-12-08', usage: 13 },
+  { date: '2024-12-09', usage: 0 },
+  { date: '2024-12-10', usage: 83 },
+  { date: '2024-12-11', usage: 58 },
+  { date: '2024-12-12', usage: 0 },
+  { date: '2024-12-13', usage: 138 },
+  { date: '2024-12-14', usage: 439 },
+  { date: '2024-12-15', usage: 11 },
+  { date: '2024-12-16', usage: 0 },
+  { date: '2024-12-17', usage: 485 },
+  { date: '2024-12-18', usage: 907 },
+  { date: '2024-12-19', usage: 91 },
+  { date: '2024-12-20', usage: 0 },
+];
+
+export const AreaTimeChart = () => {
+  const options = {
+    tooltip: {
+      trigger: 'axis',
+      position: (pt: any) => {
+        return [pt[0], '10%'];
+      }
+    },
+    title: {
+      left: 'center',
+      text: 'Daily API Usage'
+    },
+    xAxis: {
+      type: 'time',
+      boundaryGap: false
+    },
+    yAxis: {
+      type: 'value',
+      boundaryGap: [0, '100%']
+    },
+    dataZoom: [
+      {
+        type: 'inside',
+        start: 0,
+        end: 20
+      },
+      {
+        start: 0,
+        end: 20
+      }
+    ],
+    series: [
+      {
+        name: 'API Usage',
+        type: 'line',
+        smooth: true,
+        symbol: 'none',
+        areaStyle: {},
+        data: apiUsage.map((data) => [new Date(data.date).getTime(), data.usage])
+      }
+    ]
+  };
+
+  return (
+    <StyledReactECharts
+      option={ options }
+    />
+  )
+}

client/packages/lowcoder/src/pages/setting/audit/auditContants.ts

@@ -0,0 +1,7 @@
+import ReactECharts from 'echarts-for-react';
+import { styled } from 'styled-components';
+
+export const StyledReactECharts = styled(ReactECharts)`
+  width: 100%;
+  height: 400px;
+`;

client/packages/lowcoder/src/pages/setting/audit/index.tsx

@@ -1,3 +1,19 @@
+import ReactECharts from 'echarts-for-react';
+import { DetailContainer, DetailContent, Header } from '../theme/styledComponents';
+import { HeaderBack } from '../permission/styledComponents';
+import { AreaTimeChart } from './AreaTimeChart';
+
 export default function Audit() {
-  return null;
+  return (
+    <DetailContainer>
+      <Header>
+        <HeaderBack>
+          <span>{"Audit Logs"}</span>
+        </HeaderBack>
+      </Header>
+      <DetailContent>
+        <AreaTimeChart />
+      </DetailContent>
+    </DetailContainer>
+  )
 }

client/yarn.lock

@@ -9149,6 +9149,19 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
+"echarts-for-react@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "echarts-for-react@npm:3.0.2"
+  dependencies:
+    fast-deep-equal: ^3.1.3
+    size-sensor: ^1.0.1
+  peerDependencies:
+    echarts: ^3.0.0 || ^4.0.0 || ^5.0.0
+    react: ^15.0.0 || >=16.0.0
+  checksum: d3b16325befb1294d99f6f089462415be739c1654370945eef2172efd5868596f10e4cd021e0ff65b89a6f9de5e9c331ccf3765d9167ccb12d573f9632b5b7a6
+  languageName: node
+  linkType: hard
+
 "echarts-wordcloud@npm:^2.1.0":
   version: 2.1.0
   resolution: "echarts-wordcloud@npm:2.1.0"
@@ -14101,6 +14114,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
     core-js: ^3.25.2
     dotenv: ^16.0.3
     echarts: ^5.4.3
+    echarts-for-react: ^3.0.2
     echarts-wordcloud: ^2.1.0
     eslint: ^8.0.0
     eslint-config-react-app: ^7.0.1
@@ -19476,6 +19490,13 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
+"size-sensor@npm:^1.0.1":
+  version: 1.0.2
+  resolution: "size-sensor@npm:1.0.2"
+  checksum: de7050178ae9afee3388eb9191af0902b30ef83c26e8c9d9c203e1b560e270b947d978e4f56d211802112d09ef296931fa612f69155a483900f3b4717a0750d7
+  languageName: node
+  linkType: hard
+
 "slash@npm:^3.0.0":
   version: 3.0.0
   resolution: "slash@npm:3.0.0"