forked from ddrilling/asb_cloud_front
Улучшена работа контекстного меню
This commit is contained in:
parent
4ccab4dec5
commit
cd3c873368
@ -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)
|
||||||
|
@ -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}
|
||||||
|
Loading…
Reference in New Issue
Block a user