root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: chart resize

Browse Source
This commit is contained in:
jialin
2024-10-23 18:04:34 +08:00
parent f5edf39027
commit 8576015633
9 changed files with 72 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/echarts/chart.tsx
+30 -7
View File
@@ -1,4 +1,4 @@
import { throttle } from 'echarts/core';
import { throttle } from 'lodash';
import { useCallback, useEffect, useRef } from 'react';
import echarts, { ECOption } from '.';
@@ -9,6 +9,8 @@ const Chart: React.FC<{
}> = ({ options, width, height }) => {
const container = useRef<HTMLDivElement>(null);
const chart = useRef<echarts.EChartsType>();
const resizeable = useRef(false);
const resizeObserver = useRef<ResizeObserver>();
const init = useCallback(() => {
if (container.current) {
@@ -30,27 +32,48 @@ const Chart: React.FC<{
}, []);
useEffect(() => {
init();
if (container.current) {
init();
}
return () => {
chart.current?.dispose();
};
}, [init]);
useEffect(() => {
resizeable.current = false;
resize();
setOption(options);
}, [options]);
// resize on window resize
useEffect(() => {
let timer: any = null;
timer = setTimeout(() => {
resizeable.current = true;
}, 300);
return () => {
clearTimeout(timer);
};
}, []);
useEffect(() => {
const handleResize = throttle(() => {
resize();
if (resizeable.current) {
chart.current?.resize();
}
}, 100);
window.addEventListener('resize', handleResize);
if (container.current) {
resizeObserver.current = new ResizeObserver(handleResize);
resizeObserver.current.observe(container.current);
}
return () => {
window.removeEventListener('resize', handleResize);
if (container.current) {
resizeObserver.current?.unobserve(container.current);
}
};
}, [resize]);
}, []);
return <div ref={container} style={{ width: width, height }}></div>;
};
src/components/echarts/index.ts
+2 -6
View File
@@ -1,5 +1,4 @@
import type {
// 系列类型的定义后缀都为 SeriesOption
BarSeriesOption,
GaugeSeriesOption,
LineSeriesOption
@@ -8,18 +7,16 @@ import { BarChart, GaugeChart, LineChart } from 'echarts/charts';
import type {
DatasetComponentOption,
GridComponentOption,
// 组件类型的定义后缀都为 ComponentOption
TitleComponentOption,
TooltipComponentOption
} from 'echarts/components';
import {
// 数据集组件
DatasetComponent,
GridComponent,
LegendComponent,
TitleComponent,
TooltipComponent,
// 内置数据转换器组件 (filter, sort)
// (filter, sort)
TransformComponent
} from 'echarts/components';
import type { ComposeOption } from 'echarts/core';
@@ -27,7 +24,6 @@ import * as echarts from 'echarts/core';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = ComposeOption<
| BarSeriesOption
| LineSeriesOption
@@ -38,7 +34,7 @@ type ECOption = ComposeOption<
| GaugeSeriesOption
>;
// 注册必须的组件
// register components and charts
echarts.use([
LegendComponent,
TitleComponent,
src/hooks/use-overlay-scroller.ts
+9 -10
View File
@@ -49,16 +49,15 @@ export default function useOverlayScroller(options?: any) {
scrollEventElement.current =
instanceRef.current?.elements()?.scrollEventElement;
const throttledScroll = React.useMemo(
() =>
throttle(() => {
scrollEventElement.current?.scrollTo?.({
top: scrollEventElement.current.scrollHeight,
behavior: 'smooth'
});
instanceRef.current?.update?.();
}, 300),
[scrollEventElement.current, instanceRef.current]
const throttledScroll = React.useCallback(
throttle(() => {
scrollEventElement.current?.scrollTo?.({
top: scrollEventElement.current.scrollHeight,
behavior: 'smooth'
});
instanceRef.current?.update?.();
}, 100),
[(scrollEventElement.current, instanceRef.current)]
);
const scrollauto = React.useCallback(() => {
src/pages/dashboard/components/resource-utilization.tsx
-72
View File
@@ -37,78 +37,6 @@ const TypeKeyMap = {
}
};
const option = {
title: {
text: ''
},
legend: {
itemWidth: 8,
itemHeight: 8,
data: []
},
grid: {
left: 0,
right: 20,
bottom: 20,
containLabel: true
},
tooltip: {
trigger: 'axis',
formatter(params: any) {
let result = `<span class="tooltip-x-name">${params[0].axisValue}</span>`;
params.forEach((item: any) => {
result += `<span class="tooltip-item">
<span class="tooltip-item-name">
<span style="display:inline-block;margin-right:5px;border-radius:8px;width:8px;height:8px;background-color:${item.color};"></span>
<span class="tooltip-title">${item.seriesName}</span>:
</span>
<span class="tooltip-value">${item.data.value}</span>
</span>`;
});
return `<div class="tooltip-wrapper">${result}</div>`;
}
},
xAxis: {
type: 'category',
boundaryGap: true,
axisTick: {
show: true,
lineStyle: {
color: chartColorMap.tickLineColor
}
},
axisLabel: {
color: chartColorMap.axislabelColor,
// fontFamily: 'unset',
fontSize: 12
},
axisLine: {
show: false
},
data: []
},
yAxis: {
max: 100,
min: 0,
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
},
axisLabel: {
color: chartColorMap.axislabelColor,
// fontFamily: 'unset',
fontSize: 12
},
axisTick: {
show: false
},
type: 'value'
},
series: []
};
const UtilizationOvertime: React.FC = () => {
const intl = useIntl();
const data = useContext(DashboardContext)?.system_load?.history || {};
src/pages/playground/components/message-input.tsx
+1
View File
@@ -353,6 +353,7 @@ const MessageInput: React.FC<MessageInputProps> = ({
type="text"
icon={<ClearOutlined />}
size="middle"
disabled={loading}
onClick={handleClearAll}
></Button>
</Tooltip>
src/pages/playground/components/multiple-chat/model-item.tsx
+2 -4
View File
@@ -217,7 +217,6 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
};
const handleApplyToAllModels = (e: any) => {
console.log('checkbox change:', e.target.checked);
isApplyToAllModels.current = e.target.checked;
if (e.target.checked) {
setGlobalParams({
@@ -334,7 +333,6 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
}, [modelList, intl]);
useEffect(() => {
console.log('globalParams:', globalParams.model, globalParams);
setParams({
...params,
model: model,
@@ -384,7 +382,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
<div className="header">
<span className="title">
<Select
style={{ minWidth: '120px', maxWidth: '200px' }}
style={{ minWidth: '120px', maxWidth: '180px' }}
variant="borderless"
options={modelFullList}
onChange={handleModelChange}
@@ -404,7 +402,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
}}
></Select>
</span>
<ReferenceParams usage={tokenResult}></ReferenceParams>
<ReferenceParams usage={tokenResult} scaleable></ReferenceParams>
<span className="action">
<Dropdown
menu={{
src/pages/playground/components/reference-params.tsx
+18 -4
View File
@@ -1,11 +1,13 @@
import { WarningOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Alert, Space, Tooltip } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import '../style/reference-params.less';
interface ReferenceParamsProps {
showOutput?: boolean;
scaleable?: boolean;
usage: {
error?: boolean;
errorMessage?: string;
@@ -20,7 +22,7 @@ interface ReferenceParamsProps {
const ReferenceParams = (props: ReferenceParamsProps) => {
const intl = useIntl();
const { usage, showOutput = true } = props;
const { usage, showOutput = true, scaleable } = props;
if (!usage || _.isEmpty(usage)) {
return null;
}
@@ -41,8 +43,16 @@ const ReferenceParams = (props: ReferenceParamsProps) => {
);
}
return (
<div className="reference-params">
<span className="usage">
<div
className={classNames('reference-params', {
scaleable: scaleable
})}
>
<span
className={classNames('usage', {
scaleable: scaleable
})}
>
<Tooltip
title={
<Space>
@@ -65,7 +75,11 @@ const ReferenceParams = (props: ReferenceParamsProps) => {
</span>
{showOutput && (
<span className="usage">
<span
className={classNames('usage', {
scaleable: scaleable
})}
>
<Tooltip
title={
<Space>
src/pages/playground/style/model-item.less
+1
View File
@@ -4,6 +4,7 @@
border: 1px solid var(--ant-color-border);
border-radius: var(--border-radius-base);
height: 100%;
background-color: var(--color-white-1);
.header {
padding-inline: 2px 16px;
src/pages/playground/style/reference-params.less
+9
View File
@@ -6,7 +6,16 @@
color: var(--ant-orange);
gap: 20px;
&.scaleable {
gap: 15px;
}
.usage {
cursor: pointer;
line-height: 16px;
&.scaleable {
transform: scale(0.9);
}
}
}