ia.novokshanov/asb_cloud_front
1
0
Fork 0
forked from ddrilling/asb_cloud_front
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Улучшено отображений текущих значчений на графиках

Browse Source
This commit is contained in:
goodmice 2022-10-06 11:45:42 +05:00
parent d3fd851e20
commit c33674c6c5
No known key found for this signature in database
GPG Key ID: 63EA771203189CF1
1 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/d3/monitoring/D3MonitoringCurrentValues.tsx
View File

@ -5,20 +5,24 @@ import { ChartGroup, ChartSizes } from '@components/d3/monitoring/D3MonitoringCh
import { makeDisplayValue } from '@utils' import { makeDisplayValue } from '@utils'
export type D3MonitoringCurrentValuesProps<DataType extends BaseDataType> = { export type D3MonitoringCurrentValuesProps<DataType extends BaseDataType> = {
/** Группы графиков */
groups: ChartGroup<DataType>[] groups: ChartGroup<DataType>[]
/** Массив данных графика */
data: DataType[] data: DataType[]
left: number /** Объект, хранящий полезные размеры и отступы графика (нужен только groupWidth, chartsTop и groupLeft) */
sizes: ChartSizes sizes: ChartSizes
} }
const display = makeDisplayValue({ def: '---', fixed: 2 }) const display = makeDisplayValue({ def: '---', fixed: 2 })
const _D3MonitoringCurrentValues = <DataType extends BaseDataType>({ groups, data, left, sizes }: D3MonitoringCurrentValuesProps<DataType>) => ( /// `Array.at` вместе с `??` возвращает странный тип, поэтому его пока пришлось пометить как `any`
<g transform={`translate(${left}, ${sizes.chartsTop})`} pointerEvents={'none'}> /// TODO: Исправить тип
const _D3MonitoringCurrentValues = <DataType extends BaseDataType>({ groups, data, sizes }: D3MonitoringCurrentValuesProps<DataType>) => (
<g transform={`translate(${sizes.left}, ${sizes.chartsTop})`} pointerEvents={'none'}>
{groups.map((group) => ( {groups.map((group) => (
<g key={group.key} transform={`translate(${sizes.groupLeft(group.key)}, 0)`}> <g key={group.key} transform={`translate(${sizes.groupLeft(group.key)}, 0)`}>
{group.charts.filter((chart) => chart.showCurrentValue).map((chart, i) => ( {group.charts.filter((chart) => chart.showCurrentValue).map((chart, i) => (
<g key={chart.key} stroke={'white'} fill={chart.color} strokeWidth={3} paintOrder={'stroke'}> <g key={chart.key} stroke={'white'} fill={chart.color} strokeWidth={4} paintOrder={'stroke'} style={{ fontWeight: 600 }}>
<text x={sizes.groupWidth / 2 - 10} textAnchor={'end'} y={15 + i * 20}>{chart.shortLabel ?? chart.label}:</text> <text x={sizes.groupWidth / 2 - 10} textAnchor={'end'} y={15 + i * 20}>{chart.shortLabel ?? chart.label}:</text>
<text x={sizes.groupWidth / 2 + 10} textAnchor={'start'} y={15 + i * 20}>{display(chart.x((data.at(-1) ?? {}) as any))}</text> <text x={sizes.groupWidth / 2 + 10} textAnchor={'start'} y={15 + i * 20}>{display(chart.x((data.at(-1) ?? {}) as any))}</text>
</g> </g>
@ -28,6 +32,15 @@ const _D3MonitoringCurrentValues = <DataType extends BaseDataType>({ groups, dat
</g> </g>
) )
/**
* Отрисовывает последние значения графиков
*
* @typeParam DataType - тип данных для отрисовки графиков
*
* @param groups - Массив групп графиков
* @param data - Массив данных графиков
* @param sizes - Объект с полезными размерами и отступами внутри svg
*/
export const D3MonitoringCurrentValues = memo(_D3MonitoringCurrentValues) as typeof _D3MonitoringCurrentValues export const D3MonitoringCurrentValues = memo(_D3MonitoringCurrentValues) as typeof _D3MonitoringCurrentValues
export default D3MonitoringCurrentValues export default D3MonitoringCurrentValues