Skip to content

Commit 55e62fd

Browse files
ptbrowneptbrowne
authored
Merge pull request #902 from visualize-admin/feat/in-place-interactive-filters
2 parents e345ccd + 26bf3f1 commit 55e62fd

27 files changed

Lines changed: 919 additions & 900 deletions

‎app/charts/area/chart-area.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,7 @@ import { QueryFilters } from "@/charts/shared/chart-helpers";
99
import { ChartContainer, ChartSvg } from "@/charts/shared/containers";
1010
import { Ruler } from "@/charts/shared/interaction/ruler";
1111
import { Tooltip } from "@/charts/shared/interaction/tooltip";
12-
import {
13-
InteractiveLegendColor,
14-
LegendColor,
15-
} from "@/charts/shared/legend-color";
12+
import { LegendColor } from "@/charts/shared/legend-color";
1613
import { InteractionHorizontal } from "@/charts/shared/overlay-horizontal";
1714
import {
1815
AreaConfig,
@@ -95,11 +92,13 @@ export const ChartAreas = memo(
9592
<Tooltip type={fields.segment ? "multiple" : "single"} />
9693
<Ruler />
9794
</ChartContainer>
98-
{fields.segment && interactiveFiltersConfig?.legend.active === true ? (
99-
<InteractiveLegendColor />
100-
) : fields.segment ? (
101-
<LegendColor symbol="square" />
102-
) : null}
95+
96+
<LegendColor
97+
symbol="square"
98+
interactive={
99+
fields.segment && interactiveFiltersConfig?.legend.active === true
100+
}
101+
/>
103102
</AreaChart>
104103
);
105104
}

‎app/charts/column/chart-column.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,7 @@ import {
1818
import { BrushTime } from "@/charts/shared/brush";
1919
import { ChartContainer, ChartSvg } from "@/charts/shared/containers";
2020
import { Tooltip } from "@/charts/shared/interaction/tooltip";
21-
import {
22-
InteractiveLegendColor,
23-
LegendColor,
24-
} from "@/charts/shared/legend-color";
21+
import { LegendColor } from "@/charts/shared/legend-color";
2522
import {
2623
ColumnConfig,
2724
ColumnFields,
@@ -107,11 +104,13 @@ export const ChartColumns = memo(
107104
</ChartSvg>
108105
<Tooltip type="multiple" />
109106
</ChartContainer>
110-
{fields.segment && interactiveFiltersConfig?.legend.active ? (
111-
<InteractiveLegendColor />
112-
) : fields.segment ? (
113-
<LegendColor symbol="square" />
114-
) : null}
107+
108+
<LegendColor
109+
symbol="square"
110+
interactive={
111+
fields.segment && interactiveFiltersConfig?.legend.active
112+
}
113+
/>
115114
</StackedColumnsChart>
116115
) : fields.segment?.componentIri &&
117116
fields.segment.type === "grouped" ? (
@@ -136,11 +135,12 @@ export const ChartColumns = memo(
136135
<Tooltip type="multiple" />
137136
</ChartContainer>
138137

139-
{fields.segment && interactiveFiltersConfig?.legend.active ? (
140-
<InteractiveLegendColor />
141-
) : fields.segment ? (
142-
<LegendColor symbol="square" />
143-
) : null}
138+
<LegendColor
139+
symbol="square"
140+
interactive={
141+
fields.segment && interactiveFiltersConfig?.legend.active
142+
}
143+
/>
144144
</GroupedColumnChart>
145145
) : (
146146
<ColumnChart

‎app/charts/line/chart-lines.tsx‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,7 @@ import { ChartContainer, ChartSvg } from "@/charts/shared/containers";
99
import { HoverDotMultiple } from "@/charts/shared/interaction/hover-dots-multiple";
1010
import { Ruler } from "@/charts/shared/interaction/ruler";
1111
import { Tooltip } from "@/charts/shared/interaction/tooltip";
12-
import {
13-
InteractiveLegendColor,
14-
LegendColor,
15-
} from "@/charts/shared/legend-color";
12+
import { LegendColor } from "@/charts/shared/legend-color";
1613
import { InteractionHorizontal } from "@/charts/shared/overlay-horizontal";
1714
import {
1815
DataSource,
@@ -100,11 +97,10 @@ export const ChartLines = memo(function ChartLines({
10097
<Tooltip type={fields.segment ? "multiple" : "single"} />
10198
</ChartContainer>
10299

103-
{fields.segment && interactiveFiltersConfig?.legend.active ? (
104-
<InteractiveLegendColor />
105-
) : fields.segment ? (
106-
<LegendColor symbol="line" />
107-
) : null}
100+
<LegendColor
101+
symbol="line"
102+
interactive={fields.segment && interactiveFiltersConfig?.legend.active}
103+
/>
108104
</LineChart>
109105
);
110106
});

‎app/charts/pie/chart-pie.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,7 @@ import { PieChart } from "@/charts/pie/pie-state";
66
import { A11yTable } from "@/charts/shared/a11y-table";
77
import { ChartContainer, ChartSvg } from "@/charts/shared/containers";
88
import { Tooltip } from "@/charts/shared/interaction/tooltip";
9-
import {
10-
InteractiveLegendColor,
11-
LegendColor,
12-
} from "@/charts/shared/legend-color";
9+
import { LegendColor } from "@/charts/shared/legend-color";
1310
import {
1411
Loading,
1512
LoadingDataError,
@@ -122,11 +119,12 @@ export const ChartPie = memo(
122119
</ChartSvg>
123120
<Tooltip type="single" />
124121
</ChartContainer>
125-
{fields.segment && interactiveFiltersConfig?.legend.active === true ? (
126-
<InteractiveLegendColor />
127-
) : fields.segment ? (
128-
<LegendColor symbol="square" />
129-
) : null}{" "}
122+
<LegendColor
123+
symbol="square"
124+
interactive={
125+
fields.segment && interactiveFiltersConfig?.legend.active === true
126+
}
127+
/>
130128
</PieChart>
131129
);
132130
}

‎app/charts/scatterplot/chart-scatterplot.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,7 @@ import {
1212
} from "@/charts/shared/axis-width-linear";
1313
import { ChartContainer, ChartSvg } from "@/charts/shared/containers";
1414
import { Tooltip } from "@/charts/shared/interaction/tooltip";
15-
import {
16-
InteractiveLegendColor,
17-
LegendColor,
18-
} from "@/charts/shared/legend-color";
15+
import { LegendColor } from "@/charts/shared/legend-color";
1916
import { InteractionVoronoi } from "@/charts/shared/overlay-voronoi";
2017
import {
2118
DataSource,
@@ -100,11 +97,13 @@ export const ChartScatterplot = memo(
10097
</ChartSvg>
10198
<Tooltip type="single" />
10299
</ChartContainer>
103-
{fields.segment && interactiveFiltersConfig?.legend.active === true ? (
104-
<InteractiveLegendColor />
105-
) : fields.segment ? (
106-
<LegendColor symbol="circle" />
107-
) : null}{" "}
100+
101+
<LegendColor
102+
symbol="circle"
103+
interactive={
104+
fields.segment && interactiveFiltersConfig?.legend.active === true
105+
}
106+
/>
108107
</ScatterplotChart>
109108
);
110109
}

0 commit comments

Comments
 (0)