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

Улучшена работа с тиками на D3Chart

Browse Source
This commit is contained in:
goodmice 2022-07-11 12:53:40 +05:00
parent 028c05baac
commit 8bb98f6c4c
1 changed files with 34 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/d3/D3Chart.tsx
View File

@ -8,6 +8,7 @@ import LoaderPortal from '@components/LoaderPortal'
import { isDev, usePartialProps } from '@utils' import { isDev, usePartialProps } from '@utils'
import D3MouseZone from './D3MouseZone' import D3MouseZone from './D3MouseZone'
import { getChartClass } from './functions'
import { import {
renderArea, renderArea,
renderLine, renderLine,
@ -43,8 +44,6 @@ const defaultOffsets: ChartOffset = {
right: 10, right: 10,
} }
export const getGroupClass = (key: string | number) => `chart-id-${key}`
export const getByAccessor = <DataType extends Record<any, any>, R>(accessor: keyof DataType | ((d: DataType) => R)): ((d: DataType) => R) => { export const getByAccessor = <DataType extends Record<any, any>, R>(accessor: keyof DataType | ((d: DataType) => R)): ((d: DataType) => R) => {
if (typeof accessor === 'function') if (typeof accessor === 'function')
return accessor return accessor
@ -184,29 +183,53 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
return yAxis return yAxis
}, [charts, data, domain, height, offset]) }, [charts, data, domain, height, offset])
const nTicks = {
color: 'lightgray',
...ticks,
x: {
visible: false,
format: (d: any) => String(d),
count: 10,
...ticks?.x,
}
}
useEffect(() => { // Рисуем ось X useEffect(() => { // Рисуем ось X
if (!xAxis) return if (!xAxis) return
xAxisArea().transition() xAxisArea().transition()
.duration(animDurationMs) .duration(animDurationMs)
.call(d3.axisBottom(xAxis) .call(d3.axisBottom(xAxis)
.tickSize((ticks?.x?.visible ?? false) ? -height + offset.bottom : 0) .tickSize(nTicks.x.visible ? -height + offset.bottom : 0)
.tickFormat((d) => ticks?.x?.format?.(d) ?? String(d)) .tickFormat((d, i) => nTicks.x.format(d, i))
.ticks(ticks?.x?.count ?? 10) as any // TODO: Исправить тип .ticks(nTicks.x.count) as any // TODO: Исправить тип
) )
xAxisArea().selectAll('.tick line').attr('stroke', ticks?.color || 'lightgray') xAxisArea().selectAll('.tick line').attr('stroke', nTicks.x.color || nTicks.color)
}, [xAxisArea, xAxis, animDurationMs, height, offset, ticks]) }, [xAxisArea, xAxis, animDurationMs, height, offset, ticks])
useEffect(() => { // Рисуем ось Y useEffect(() => { // Рисуем ось Y
if (!yAxis) return if (!yAxis) return
const nTicks = {
color: 'lightgray',
...ticks,
y: {
visible: false,
format: (d: any) => String(d),
count: 10,
...ticks?.y,
}
}
yAxisArea().transition() yAxisArea().transition()
.duration(animDurationMs) .duration(animDurationMs)
.call(d3.axisLeft(yAxis) .call(d3.axisLeft(yAxis)
.tickSize((ticks?.y?.visible ?? false) ? -width + offset.left + offset.right : 0) .tickSize(nTicks.y.visible ? -width + offset.left + offset.right : 0)
.ticks(ticks?.y?.count ?? 10) as any // TODO: Исправить тип .tickFormat((d, i) => nTicks.y.format(d, i))
.ticks(nTicks.y.count) as any // TODO: Исправить тип
) )
yAxisArea().selectAll('.tick line').attr('stroke', ticks?.color || 'lightgray') yAxisArea().selectAll('.tick line').attr('stroke', nTicks.y.color || nTicks.color)
}, [yAxisArea, yAxis, animDurationMs, width, offset, ticks]) }, [yAxisArea, yAxis, animDurationMs, width, offset, ticks])
useEffect(() => { useEffect(() => {
@ -232,7 +255,7 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
chartIdx = charts.length chartIdx = charts.length
const newChart: ChartRegistry<DataType> = Object.assign( const newChart: ChartRegistry<DataType> = Object.assign(
() => chartArea().select('.' + getGroupClass(dataset.key)) as d3.Selection<SVGGElement, DataType, any, unknown>, () => chartArea().select('.' + getChartClass(dataset.key)) as d3.Selection<SVGGElement, DataType, any, unknown>,
{ {
width: 1, width: 1,
opacity: 1, opacity: 1,
@ -252,7 +275,7 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
if (!newChart().node()) if (!newChart().node())
chartArea() chartArea()
.append('g') .append('g')
.attr('class', getGroupClass(newChart.key)) .attr('class', getChartClass(newChart.key))
charts[chartIdx] = newChart charts[chartIdx] = newChart
}) })