diff --git a/src/components/Table/DateRangeWrapper.tsx b/src/components/Table/DateRangeWrapper.tsx index 587e3bf..4ad140f 100755 --- a/src/components/Table/DateRangeWrapper.tsx +++ b/src/components/Table/DateRangeWrapper.tsx @@ -11,6 +11,7 @@ const { RangePicker } = DatePicker export type DateRangeWrapperProps = RangePickerSharedProps & { value?: RangeValue, isUTC?: boolean + allowClear?: boolean } const normalizeDates = (value?: RangeValue, isUTC?: boolean): RangeValue => { @@ -21,10 +22,10 @@ const normalizeDates = (value?: RangeValue, isUTC?: boolean): RangeValue ] } -export const DateRangeWrapper = memo(({ value, isUTC, ...other }) => ( +export const DateRangeWrapper = memo(({ value, isUTC, allowClear = false, ...other }) => ( + afterDraw?: (d: d3.Selection) => void } const defaultOffset = { top: 50, right: 100, bottom: 50, left: 100 } @@ -29,13 +30,14 @@ export const D3HorizontalPercentChart = memo(({ height: givenHeight = '100%', offset: givenOffset, data, + afterDraw, }) => { const offset = usePartialProps(givenOffset, defaultOffset) const [divRef, { width, height }] = useElementSize() const rootRef = useRef(null) - const root = useMemo(() => rootRef.current ? d3.select(rootRef.current) : null, [rootRef.current]) + const root = useCallback(() => rootRef.current ? d3.select(rootRef.current) : null, [rootRef.current]) const inlineWidth = useMemo(() => width - offset.left - offset.right, [width]) const inlineHeight = useMemo(() => height - offset.top - offset.bottom, [height]) @@ -44,42 +46,50 @@ export const D3HorizontalPercentChart = memo(({ const yScale = useMemo(() => d3.scaleBand().domain(data.map((d) => d.name)).range([0, inlineHeight]).padding(0.25), [data, inlineHeight]) useEffect(() => { /// Отрисовываем оси X сверху и снизу - if (width < 100 || height < 100 || !root) return + const r = root() + if (width < 100 || height < 100 || !r) return const xAxisTop = d3.axisTop(xScale).tickFormat((d) => `${d}%`).ticks(4).tickSize(-inlineHeight) const xAxisBottom = d3.axisBottom(xScale).tickFormat((d) => `${d}%`).ticks(4) - root.selectChild('.axis.x.bottom').call(xAxisBottom) - root.selectChild('.axis.x.top').call(xAxisTop) + r.selectChild('.axis.x.bottom').call(xAxisBottom) + r.selectChild('.axis.x.top').call(xAxisTop) .selectAll('.tick') .attr('class', 'tick grid-line') }, [root, width, height, xScale, inlineHeight]) useEffect(() => { /// Отрисовываем ось Y слева - if (width < 100 || height < 100 || !root) return - root.selectChild('.axis.y.left').call(d3.axisLeft(yScale)) + const r = root() + if (width < 100 || height < 100 || !r) return + r.selectChild('.axis.y.left').call(d3.axisLeft(yScale)) }, [root, width, height, yScale]) useEffect(() => { - if (width < 100 || height < 100 || !root) return + const r = root() + if (width < 100 || height < 100 || !r) return const delay = d3.transition().duration(500).ease(d3.easeLinear) - const rects = root.selectChild('.data').selectAll('rect').data(data) + const rects = r.selectChild('.data').selectAll('rect').data(data) rects.enter().append('rect') rects.exit().remove() - root.selectChild('.data') - .selectAll('rect') - .attr('fill', (d) => d.color || 'black') - .attr('y', (d) => yScale(d.name) ?? null) - .attr('height', yScale.bandwidth()) - .transition(delay) - .attr('width', (d) => xScale(d.percent)) - }, [data, width, height, root, yScale, xScale]) + + const selectedRects = r.selectChild('.data') + .selectAll('rect') + + selectedRects.attr('fill', (d) => d.color || 'black') + .attr('y', (d) => yScale(d.name) ?? null) + .attr('height', yScale.bandwidth()) + .transition(delay) + .attr('width', (d) => d.percent > 0 ? xScale(d.percent) : 0) + + afterDraw?.(selectedRects) + + }, [data, width, height, root, yScale, xScale, afterDraw]) return (
- + diff --git a/src/pages/Well/Documents/DocumentsTemplate.jsx b/src/pages/Well/Documents/DocumentsTemplate.jsx index 60d132d..f00e4ee 100644 --- a/src/pages/Well/Documents/DocumentsTemplate.jsx +++ b/src/pages/Well/Documents/DocumentsTemplate.jsx @@ -61,6 +61,8 @@ export const DocumentsTemplate = ({ idCategory, well: givenWell, mimeTypes, head filterFileName, begin, end, + undefined, + false, (page - 1) * pageSize, pageSize, ) diff --git a/src/pages/Well/DrillingProgram/CategoryHistory.jsx b/src/pages/Well/DrillingProgram/CategoryHistory.jsx index b82cce6..53ddad0 100644 --- a/src/pages/Well/DrillingProgram/CategoryHistory.jsx +++ b/src/pages/Well/DrillingProgram/CategoryHistory.jsx @@ -74,7 +74,7 @@ export const CategoryHistory = ({ idCategory, visible, onClose }) => { const [begin, end] = range?.length > 1 ? [range[0].toISOString(), range[1].toISOString()] : [null, null] const skip = (page - 1) * pageSize - const paginatedHistory = await FileService.getFilesInfo(well.caption, idCategory, companyName, fileName, begin, end, skip, pageSize) + const paginatedHistory = await FileService.getFilesInfo(well.caption, idCategory, companyName, fileName, begin, end, undefined, false, skip, pageSize) setTotal(paginatedHistory?.count ?? 0) setData(arrayOrDefault(paginatedHistory?.items)) }, diff --git a/src/pages/Well/Telemetry/OperationTime/index.jsx b/src/pages/Well/Telemetry/OperationTime/index.jsx index 9351aae..3b78fae 100644 --- a/src/pages/Well/Telemetry/OperationTime/index.jsx +++ b/src/pages/Well/Telemetry/OperationTime/index.jsx @@ -22,14 +22,14 @@ const subsystemColors = [ ] const tableColumns = [ - makeColumn('Цвет', 'color', { width: 50, render: (backgroundColor) => ( + makeColumn('Цвет', 'color', { width: 60, render: (backgroundColor) => (
)}), makeTextColumn('Подсистема', 'subsystemName'), - makeNumericColumn('Использование, %', 'kUsage', undefined, undefined, val => (+val * 100).toFixed(2)), - makeNumericColumn('Проходка, м', 'sumDepthInterval'), - makeNumericColumn('Время работы, ч', 'usedTimeHours'), - makeNumericColumn('Кол-во запусков', 'operationCount', undefined, undefined, makeNumericRender(0)), + makeNumericColumn('Использование, %', 'kUsage', undefined, undefined, val => (+val * 100).toFixed(2), 200), + makeNumericColumn('Проходка, м', 'sumDepthInterval', undefined, undefined, undefined, 200), + makeNumericColumn('Время работы, ч', 'usedTimeHours', undefined, undefined, undefined, 200), + makeNumericColumn('Кол-во запусков', 'operationCount', undefined, undefined, makeNumericRender(0), 200), ] // Выбор доступен только до текущей даты @@ -65,15 +65,15 @@ export const OperationTime = memo(() => { if (!well.id) return // Ограничение задаётся только если выбраны обе даты - const startDate = dateRange[1] ? dateRange[0]?.toISOString() : undefined - const endDate = dateRange[1]?.toISOString() + const startDate = dateRange?.[1] ? dateRange[0]?.toISOString() : undefined + const endDate = dateRange?.[1] ? dateRange[1]?.toISOString() : undefined const data = await SubsystemOperationTimeService.getStat(well.id, undefined, startDate, endDate) // Выбираем цвета для подсистем (если цветов не хватает начинаем сначала) const coloredData = arrayOrDefault(data).map((d, i) => ({ ...d, color: subsystemColors[i % subsystemColors.length] })) setData(coloredData) - setSelected(data.map((d) => d.idSubsystem)) // По-умолчанию выбираем все подсистемы + setSelected(data?.map((d) => d.idSubsystem)) // По-умолчанию выбираем все подсистемы }, setShowLoader, `Не удалось загрузить данные`, @@ -95,6 +95,7 @@ export const OperationTime = memo(() => { value={selected} />