Skip to content

Commit 16e2ac5

Browse files
hibighibig
committed
feat: playground embedding
1 parent 0121407 commit 16e2ac5

33 files changed

+1518
-172
lines changed

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,4 @@
1212
/.mfsu
1313
.swc
1414
.DS_Store
15-
.idea
15+
.idea

‎config/routes.ts

+8
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,14 @@ export default [
2525
icon: 'Comment',
2626
component: './playground/index'
2727
},
28+
{
29+
name: 'embedding',
30+
title: 'embedding',
31+
path: '/playground/embedding',
32+
key: 'embedding',
33+
icon: 'Comment',
34+
component: './playground/embedding'
35+
},
2836
{
2937
name: 'rerank',
3038
title: 'Rerank',

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
"react-dom": "^18.2.0",
5757
"react-hotkeys-hook": "^4.5.0",
5858
"simplebar-react": "^3.2.6",
59+
"umap-js": "^1.4.0",
5960
"umi-presets-pro": "^2.0.3",
6061
"xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
6162
},

‎pnpm-lock.yaml

+51
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/assets/styles/common.less

+6
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@
7777
.flex {
7878
display: flex;
7979
}
80+
8081
// space-between
8182
.flex-between {
8283
display: flex;
@@ -87,6 +88,7 @@
8788
display: flex;
8889
justify-content: center;
8990
}
91+
9092
// align-items: center
9193
.flex-center {
9294
display: flex;
@@ -168,6 +170,10 @@
168170
margin-bottom: 0;
169171
}
170172

173+
.m-b-16 {
174+
margin-bottom: 16px;
175+
}
176+
171177
.font-400 {
172178
font-weight: var(--font-weight-normal);
173179
}

‎src/components/echarts/bar-chart.tsx

+14-14
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
} from '@/components/echarts/config';
1111
import EmptyData from '@/components/empty-data';
1212
import _ from 'lodash';
13-
import { memo } from 'react';
13+
import { memo, useMemo } from 'react';
1414
import { ChartProps } from './types';
1515

1616
const BarChart: React.FC<ChartProps> = (props) => {
@@ -24,10 +24,6 @@ const BarChart: React.FC<ChartProps> = (props) => {
2424
title
2525
} = props;
2626

27-
if (!seriesData.length) {
28-
return <EmptyData height={height} title={title}></EmptyData>;
29-
}
30-
3127
const options = {
3228
title: {
3329
text: ''
@@ -55,7 +51,7 @@ const BarChart: React.FC<ChartProps> = (props) => {
5551

5652
series: []
5753
};
58-
const setDataOptions = () => {
54+
const dataOptions = useMemo((): any => {
5955
const data = _.map(seriesData, (item: any) => {
6056
return {
6157
...item,
@@ -82,16 +78,20 @@ const BarChart: React.FC<ChartProps> = (props) => {
8278
},
8379
series: data
8480
};
85-
};
86-
87-
const dataOptions: any = setDataOptions();
81+
}, [seriesData, xAxisData, title]);
8882

8983
return (
90-
<Chart
91-
height={height}
92-
options={dataOptions}
93-
width={width || '100%'}
94-
></Chart>
84+
<>
85+
{!seriesData.length ? (
86+
<EmptyData height={height} title={title}></EmptyData>
87+
) : (
88+
<Chart
89+
height={height}
90+
options={dataOptions}
91+
width={width || '100%'}
92+
></Chart>
93+
)}
94+
</>
9595
);
9696
};
9797

‎src/components/echarts/chart.tsx

+33-14
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,30 @@
11
import { throttle } from 'lodash';
2-
import { useCallback, useEffect, useRef } from 'react';
2+
import {
3+
forwardRef,
4+
useCallback,
5+
useEffect,
6+
useImperativeHandle,
7+
useRef
8+
} from 'react';
39
import echarts, { ECOption } from '.';
410

511
const Chart: React.FC<{
612
options: ECOption;
713
height: number | string;
814
width: number | string;
9-
}> = ({ options, width, height }) => {
15+
ref?: any;
16+
}> = forwardRef(({ options, width, height }, ref) => {
1017
const container = useRef<HTMLDivElement>(null);
1118
const chart = useRef<echarts.EChartsType>();
1219
const resizeable = useRef(false);
1320
const resizeObserver = useRef<ResizeObserver>();
1421

22+
useImperativeHandle(ref, () => {
23+
return {
24+
chart: chart.current
25+
};
26+
});
27+
1528
const init = useCallback(() => {
1629
if (container.current) {
1730
chart.current?.clear();
@@ -44,18 +57,9 @@ const Chart: React.FC<{
4457
resizeable.current = false;
4558
resize();
4659
setOption(options);
60+
resizeable.current = true;
4761
}, [options]);
4862

49-
useEffect(() => {
50-
let timer: any = null;
51-
timer = setTimeout(() => {
52-
resizeable.current = true;
53-
}, 300);
54-
return () => {
55-
clearTimeout(timer);
56-
};
57-
}, []);
58-
5963
useEffect(() => {
6064
const handleResize = throttle(() => {
6165
if (resizeable.current) {
@@ -75,7 +79,22 @@ const Chart: React.FC<{
7579
};
7680
}, []);
7781

78-
return <div ref={container} style={{ width: width, height }}></div>;
79-
};
82+
// resize on window resize
83+
// useEffect(() => {
84+
// const handleResize = throttle(() => {
85+
// chart.current?.resize();
86+
// }, 100);
87+
// window.addEventListener('resize', handleResize);
88+
// return () => {
89+
// window.removeEventListener('resize', handleResize);
90+
// };
91+
// }, []);
92+
93+
return (
94+
<div className="chart-wrapper" style={{ width: width, height }}>
95+
<div ref={container} style={{ width: width, height }}></div>
96+
</div>
97+
);
98+
});
8099

81100
export default Chart;

‎src/components/echarts/h-bar.tsx

+18-15
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
} from '@/components/echarts/config';
1010
import EmptyData from '@/components/empty-data';
1111
import _ from 'lodash';
12-
import { memo } from 'react';
12+
import { memo, useMemo } from 'react';
1313
import { ChartProps } from './types';
1414

1515
const BarChart: React.FC<ChartProps> = (props) => {
@@ -22,12 +22,12 @@ const BarChart: React.FC<ChartProps> = (props) => {
2222
legendData,
2323
title
2424
} = props;
25-
if (!seriesData.length) {
26-
return <EmptyData height={height} title={title}></EmptyData>;
27-
}
2825

2926
const options = {
30-
title: titleConfig,
27+
title: {
28+
...titleConfig,
29+
left: 'start'
30+
},
3131
grid,
3232
tooltip: {
3333
...tooltip
@@ -48,7 +48,7 @@ const BarChart: React.FC<ChartProps> = (props) => {
4848
series: []
4949
};
5050

51-
const setDataOptions = () => {
51+
const dataOptions = useMemo((): any => {
5252
const data = _.map(seriesData, (item: any) => {
5353
return {
5454
...item,
@@ -69,7 +69,6 @@ const BarChart: React.FC<ChartProps> = (props) => {
6969
animation: false,
7070
title: {
7171
...options.title,
72-
left: 'start',
7372
text: title
7473
},
7574
yAxis: {
@@ -103,16 +102,20 @@ const BarChart: React.FC<ChartProps> = (props) => {
103102
},
104103
series: data
105104
};
106-
};
107-
108-
const dataOptions: any = setDataOptions();
105+
}, [seriesData, xAxisData, title]);
109106

110107
return (
111-
<Chart
112-
height={height}
113-
options={dataOptions}
114-
width={width || '100%'}
115-
></Chart>
108+
<>
109+
{!seriesData.length ? (
110+
<EmptyData height={height} title={title}></EmptyData>
111+
) : (
112+
<Chart
113+
height={height}
114+
options={dataOptions}
115+
width={width || '100%'}
116+
></Chart>
117+
)}
118+
</>
116119
);
117120
};
118121

‎src/components/echarts/index.ts

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import type {
22
BarSeriesOption,
33
GaugeSeriesOption,
4-
LineSeriesOption
4+
LineSeriesOption,
5+
ScatterSeriesOption
56
} from 'echarts/charts';
6-
import { BarChart, GaugeChart, LineChart } from 'echarts/charts';
7+
import { BarChart, GaugeChart, LineChart, ScatterChart } from 'echarts/charts';
78
import type {
89
DatasetComponentOption,
910
GridComponentOption,
@@ -32,6 +33,7 @@ type ECOption = ComposeOption<
3233
| GridComponentOption
3334
| DatasetComponentOption
3435
| GaugeSeriesOption
36+
| ScatterSeriesOption
3537
>;
3638

3739
// register components and charts
@@ -44,6 +46,7 @@ echarts.use([
4446
TransformComponent,
4547
BarChart,
4648
LineChart,
49+
ScatterChart,
4750
GaugeChart,
4851
LabelLayout,
4952
UniversalTransition,

0 commit comments

Comments
 (0)