Улучшена работа контекстного меню

This commit is contained in:
goodmice 2022-06-30 11:32:19 +05:00
parent 4ccab4dec5
commit cd3c873368
2 changed files with 21 additions and 30 deletions

View File

@ -32,12 +32,15 @@ export const D3ContextMenu = memo<D3ContextMenuProps>(({
const overlay = useFunctionalValue(_overlay) const overlay = useFunctionalValue(_overlay)
const menuItems = useMemo(() => { const menuItems = useMemo(() => {
const menuItems: ItemType[] = [ const menuItems: ItemType[] = []
{ key: 'refresh', label: 'Обновить', onClick: onUpdate },
{ key: 'download', label: svg && ( if (onUpdate)
menuItems.push({ key: 'refresh', label: 'Обновить', onClick: onUpdate })
if (svg)
menuItems.push({ key: 'download', label: (
<a href={svgToDataURL(svg)} download={`${downloadFilename}.svg`}>Сохранить</a> <a href={svgToDataURL(svg)} download={`${downloadFilename}.svg`}>Сохранить</a>
)}, )})
]
if (additionalMenuItems) if (additionalMenuItems)
menuItems.push(...additionalMenuItems) menuItems.push(...additionalMenuItems)

View File

@ -1,4 +1,4 @@
import { memo, useCallback, useMemo, useState } from 'react' import { memo, useMemo } from 'react'
import { D3Chart } from '@components/d3' import { D3Chart } from '@components/d3'
import { formatDate } from '@utils' import { formatDate } from '@utils'
@ -71,42 +71,30 @@ const ticks = {
y: { visible: true }, y: { visible: true },
} }
export const OperationsChart = memo(({ data, yDomain, height }) => { const plugins = {
const [isChartLoading, setIsChartLoading] = useState(false) tooltip: {
enabled: true,
type: 'nearest',
height: 150,
limit: 4,
},
cursor: {
enabled: true,
}
}
export const OperationsChart = memo(({ data, yDomain, height, onDomainChanged }) => {
const domain = useMemo(() => ({ const domain = useMemo(() => ({
y: { min: 0, max: yDomain }, y: { min: 0, max: yDomain },
// x: { min: new Date('2021-11-04 03:57'), max: new Date('2022-06-17 13:16') } // x: { min: new Date('2021-11-04 03:57'), max: new Date('2022-06-17 13:16') }
}), [yDomain]) }), [yDomain])
const onChartUpdate = useCallback(() => {
setIsChartLoading(true)
setTimeout(() => setIsChartLoading(false), 2000)
}, [])
const plugins = useMemo(() => ({
tooltip: {
enabled: true,
type: 'nearest',
height: 150,
limit: 4,
},
cursor: {
enabled: true,
},
menu: {
enabled: false,
onUpdate: onChartUpdate,
}
}), [onChartUpdate])
return ( return (
<D3Chart <D3Chart
xAxis={xAxis} xAxis={xAxis}
domain={domain} domain={domain}
datasets={chartDatasets} datasets={chartDatasets}
data={data} data={data}
loading={isChartLoading}
height={height} height={height}
plugins={plugins} plugins={plugins}
ticks={ticks} ticks={ticks}