zias/stats
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix bugs in report editor, mainly re-render issues with same keys

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-04-27 21:14:46 +02:00
parent 64b2e84aeb
commit c3815bf6ab
9 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/dashboard/src/components/report/chart/ReportAreaChart.tsx
View File

@@ -91,7 +91,7 @@ export function ReportAreaChart({
type={lineType}
isAnimationActive={true}
strokeWidth={2}
dataKey={`${serie.index}:count`}
dataKey={`${serie.id}:count`}
stroke={color}
fill={`url(#color${color})`}
stackId={'1'}

4
apps/dashboard/src/components/report/chart/ReportHistogramChart.tsx
View File

@@ -76,7 +76,7 @@ export function ReportHistogramChart({
<Bar
key={`${serie.name}:prev`}
name={`${serie.name}:prev`}
dataKey={`${serie.index}:prev:count`}
dataKey={`${serie.id}:prev:count`}
fill={getChartColor(serie.index)}
fillOpacity={0.2}
radius={8}
@@ -85,7 +85,7 @@ export function ReportHistogramChart({
<Bar
key={serie.name}
name={serie.name}
dataKey={`${serie.index}:count`}
dataKey={`${serie.id}:count`}
fill={getChartColor(serie.index)}
radius={8}
/>

4
apps/dashboard/src/components/report/chart/ReportLineChart.tsx
View File

@@ -100,7 +100,7 @@ export function ReportLineChart({
name={serie.name}
isAnimationActive={true}
strokeWidth={2}
dataKey={`${serie.index}:count`}
dataKey={`${serie.id}:count`}
stroke={getChartColor(serie.index)}
/>
{previous && (
@@ -112,7 +112,7 @@ export function ReportLineChart({
strokeWidth={1}
dot={false}
strokeDasharray={'6 6'}
dataKey={`${serie.index}:prev:count`}
dataKey={`${serie.id}:prev:count`}
stroke={getChartColor(serie.index)}
/>
)}

2
apps/dashboard/src/components/report/chart/ReportPieChart.tsx
View File

@@ -21,7 +21,7 @@ export function ReportPieChart({ data }: ReportPieChartProps) {
const sum = series.reduce((acc, serie) => acc + serie.metrics.sum, 0);
const pieData = series.map((serie) => ({
id: serie.name,
id: serie.id,
color: getChartColor(serie.index),
index: serie.index,
label: serie.name,

2
apps/dashboard/src/components/report/sidebar/ReportEvents.tsx
View File

@@ -54,7 +54,7 @@ export function ReportEvents() {
<div className="flex flex-col gap-4">
{selectedEvents.map((event) => {
return (
<div key={event.name} className="rounded-lg border bg-slate-50">
<div key={event.id} className="rounded-lg border bg-slate-50">
<div className="flex items-center gap-2 p-2">
<ColorSquare>{event.id}</ColorSquare>
<Combobox

2
apps/dashboard/src/components/report/sidebar/filters/FiltersCombobox.tsx
View File

@@ -44,7 +44,7 @@ export function FiltersCombobox({ event }: FiltersComboboxProps) {
filters: [
...event.filters,
{
id: (event.filters.length + 1).toString(),
id: Math.random().toString(36).substring(7),
name: value,
operator: 'is',
value: [],