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-07-03 19:30:50 +05:00
parent d23e295746
commit 8cbfb3d903
2 changed files with 42 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -293,7 +293,7 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
} }
if (chart.point) if (chart.point)
renderPoint<DataType>(xAxis, yAxis, chart, chartData) renderPoint<DataType>(xAxis, yAxis, chart, chartData, true)
chart.afterDraw?.(chart) chart.afterDraw?.(chart)
}) })

64
src/components/d3/renders/points.ts
View File

@ -4,7 +4,8 @@ export const renderPoint = <DataType extends Record<string, unknown>>(
xAxis: (value: any) => number, xAxis: (value: any) => number,
yAxis: (value: any) => number, yAxis: (value: any) => number,
chart: ChartRegistry<DataType>, chart: ChartRegistry<DataType>,
data: DataType[] data: DataType[],
embeded: boolean = false,
): DataType[] => { ): DataType[] => {
let config: Required<Omit<PointChartDataset, 'type'>> = { let config: Required<Omit<PointChartDataset, 'type'>> = {
radius: 3, radius: 3,
@ -16,40 +17,57 @@ export const renderPoint = <DataType extends Record<string, unknown>>(
fillOpacity: 1, fillOpacity: 1,
} }
if (chart.type === 'point') if (embeded)
config = { ...config, ...chart }
else if (!chart.point)
return data
else
config = { ...config, ...chart.point } config = { ...config, ...chart.point }
else if (chart.type === 'point')
config = { ...config, ...chart }
else return data
const currentPoints = chart() const getPointsRoot = (): d3.Selection<any, any, any, any> => {
let root = chart()
if (embeded) {
if (root.select('.points').empty())
root.append('g').attr('class', 'points')
root = root.select('.points')
}
return root
}
getPointsRoot()
.transition()
.duration(chart.animDurationMs ?? 0)
.attr('stroke-width', config.strokeWidth)
.attr('fill-opacity', config.fillOpacity)
.attr('fill', config.fillColor)
.attr('stroke', config.strokeColor)
.attr('stroke-opacity', config.strokeOpacity)
const currentPoints = getPointsRoot()
.selectAll(config.shape) .selectAll(config.shape)
.data(data.filter(chart.y)) .data(data.filter(chart.y))
currentPoints.exit().remove() currentPoints.exit().remove()
currentPoints.enter().append(config.shape) currentPoints.enter().append(config.shape)
const newPoints = chart() const newPoints = getPointsRoot()
.selectAll(config.shape) .selectAll(config.shape)
.transition() .transition()
.duration(chart.animDurationMs ?? 0) .duration(chart.animDurationMs ?? 0)
if (config.shape === 'circle') switch (config.shape) {
newPoints.attr('r', config.radius) default:
.attr('cx', (d: any) => xAxis(chart.x(d))) case 'circle':
.attr('cy', (d: any) => yAxis(chart.y(d))) newPoints.attr('r', config.radius)
else .attr('cx', (d: any) => xAxis(chart.x(d)))
newPoints.attr('x1', (d: any) => xAxis(chart.x(d))) .attr('cy', (d: any) => yAxis(chart.y(d)))
.attr('x2', (d: any) => xAxis(chart.x(d))) break
.attr('y1', (d: any) => yAxis(chart.y(d)) - config.radius) case 'line':
.attr('y2', (d: any) => yAxis(chart.y(d)) + config.radius) newPoints.attr('x1', (d: any) => xAxis(chart.x(d)))
.attr('x2', (d: any) => xAxis(chart.x(d)))
newPoints.attr('stroke-width', config.strokeWidth) .attr('y1', (d: any) => yAxis(chart.y(d)) - config.radius)
.attr('fill-opacity', config.fillOpacity) .attr('y2', (d: any) => yAxis(chart.y(d)) + config.radius)
.attr('fill', config.fillColor) break
.attr('stroke', config.strokeColor) }
.attr('stroke-opacity', config.strokeOpacity)
return data return data
} }