chore: dark config

2025-04-28 10:05:06 +08:00
parent d4d7148f16
commit ce9c31f368
35 changed files with 678 additions and 399 deletions
@@ -0,0 +1,75 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const TooltipWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 11px;
+  background-color: rgba(255, 255, 255, 80%);
+  min-width: 100px;
+  max-width: 360px;
+
+  .tooltip-x-name {
+    font-size: var(--font-size-base);
+    color: var(--ant-color-text-tertiary);
+  }
+
+  .tooltip-item {
+    color: var(--ant-color-text-secondary);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .tooltip-item-title {
+      margin-right: 2px;
+    }
+
+    .tooltip-value {
+      margin-left: 10px;
+      color: var(--ant-color-text);
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+`;
+
+const ItemSymbol = styled.span<{ $color: string }>`
+  background-color: ${(props) => props.$color};
+  display: inline-block;
+  marginright: 5px;
+  borderradius: 8px;
+  width: 8px;
+  height: 8px;
+`;
+
+interface ChartTooltipProps {
+  params: any[];
+  callback?: (val: any) => any;
+}
+
+const ChartTooltip: React.FC<ChartTooltipProps> = (props) => {
+  const { params, callback } = props;
+  console.log('params====', params);
+  return (
+    <TooltipWrapper>
+      <span className="tooltip-x-name">{params[0]?.axisValue}</span>
+      <>
+        {params.map((item: any, index: number) => {
+          let value = callback?.(item.data.value) || item.data.value;
+
+          return (
+            <span className="tooltip-item" key={index}>
+              <span className="tooltip-item-name">
+                <ItemSymbol $color={item.color}></ItemSymbol>
+                <span className="tooltip-title">{item.seriesName}</span>:
+              </span>
+              <span className="tooltip-value">{value}</span>
+            </span>
+          );
+        })}
+      </>
+    </TooltipWrapper>
+  );
+};
+export default ChartTooltip;