Skip to content

Commit

Permalink
tooltip
Browse files Browse the repository at this point in the history
  • Loading branch information
@mluena
mluena committed Apr 1, 2024
1 parent 6650b28 commit fae6263
Show file tree
Hide file tree
Showing 5 changed files with 72 additions and 48 deletions.
73 changes: 55 additions & 18 deletions client/src/containers/charts/bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import React from 'react';

import { extent } from 'd3-array';
import { scaleLinear } from 'd3-scale';
import { BarChart, Bar, Rectangle, XAxis, YAxis, ResponsiveContainer } from 'recharts';
import { BarChart, Bar, Rectangle, XAxis, YAxis, ResponsiveContainer, Tooltip } from 'recharts';

const CustomizedXAxisTick = ({
x,
y,
Expand All @@ -20,7 +21,6 @@ const CustomizedXAxisTick = ({
</g>
);
};

const CustomizedYAxisTick = ({
x,
y,
Expand All @@ -32,57 +32,94 @@ const CustomizedYAxisTick = ({
}) => {
return (
<g transform={`translate(${x},${y})`}>
<text x={0} y={0} dy={0} dx={-2} textAnchor="middle" fill="#7C828A" fontSize={12}>
<text x={0 - 10} y={0} dy={0} dx={-2} textAnchor="middle" fill="#7C828A" fontSize={12}>
{payload.value}
</text>
</g>
);
};

const CustomTooltip = ({
active,
label,
payload,
}: {
active: boolean;
label: string;
payload: { value: string }[];
}) => {
if (!active || !payload || !payload.length) return null;
return (
<div className="shadow-tooltip m-auto rounded-md border bg-gradient-to-t p-2">
<p className="text-center">{label}</p>
<div className="flex space-x-2">
<p>Total</p>
<p>{payload[0].value}</p>
</div>
</div>
);
};

const getExt = (data: number[]) => extent(data) as [number, number];

export default function BarChartComponent({
data,
activeStyles,
barDataKey,
barRadius,
fillBar,
margin,
xAxisDataKey,
}: {
data: { [key: string]: unknown }[];
activeStyles?: { stroke: string };
barDataKey: string;
barRadius?: [number, number, number, number];
fillBar?: string;
margin?: { top: number; right: number; bottom: number; left: number };
xAxisDataKey: string;
}) {
const Yticks = data.map((d) => Number(d[barDataKey])).flat() as number[];
const maxYtick = Math.round(Math.max(...Yticks) / 10) * 10;
const mediumYtick = Math.round(maxYtick / 2 / 10) * 10;
const ext = extent(data, (d) => Number(d.year)) as [number, number];
const scaleYticks = [0, mediumYtick, maxYtick];
const xData = data.map((d) => Number(d[xAxisDataKey]));
const extX = getExt(xData);

const xScale = scaleLinear()
.domain([extX[0] - 1, extX[1] + 1])
.nice();

const scale = scaleLinear().domain(ext);
const xTicks = xScale.ticks(3);

const ticksY = data.map((d) => Number(d[barDataKey])).flat() as number[];
const maxYtick = Math.round(Math.max(...ticksY) / 10) * 10;
const mediumYtick = Math.round(maxYtick / 2 / 10) * 10;

return (
<ResponsiveContainer width="100%" height="100%">
<BarChart width={500} height={300} data={data} margin={margin}>
<XAxis
dataKey="year"
dataKey={xAxisDataKey}
axisLine={false}
tickLine={false}
scale={scale}
ticks={scale.ticks(5)}
domain={ext}
includeHidden
tick={CustomizedXAxisTick}
ticks={xTicks}
scale={xScale}
domain={extX}
type="number"
/>
<YAxis
axisLine={false}
tickLine={false}
ticks={[0, mediumYtick, maxYtick]}
tick={CustomizedYAxisTick}
/>
<Tooltip
cursor={{ fill: 'transparent' }}
content={<CustomTooltip label={xAxisDataKey} active={false} payload={[]} />}
/>
<YAxis axisLine={false} tickLine={false} ticks={scaleYticks} tick={CustomizedYAxisTick} />
<Bar
dataKey={barDataKey}
fill={fillBar}
radius={barRadius}
activeBar={<Rectangle stroke={activeStyles?.stroke} />}
activeBar={<Rectangle stroke="#D48D00" strokeWidth={2} />}
barSize={19.75}
alignmentBaseline="middle"
/>
</BarChart>
</ResponsiveContainer>
Expand Down
14 changes: 4 additions & 10 deletions client/src/containers/countries/detail/panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -377,16 +377,13 @@ export default function CountryDetailPanel() {
year,
uv,
}))}
activeStyles={{
stroke: 'yellow',
}}
barDataKey="uv"
barRadius={[20, 20, 20, 20]}
fillBar="#70CCB0"
margin={{
top: 2,
right: 2,
left: -40,
right: 10,
left: -20,
bottom: -4,
}}
xAxisDataKey="year"
Expand Down Expand Up @@ -433,16 +430,13 @@ export default function CountryDetailPanel() {
year,
uv,
}))}
activeStyles={{
stroke: 'yellow',
}}
barDataKey="uv"
barRadius={[20, 20, 20, 20]}
fillBar="#70B6CC"
margin={{
top: 2,
right: 2,
left: -40,
right: 20,
left: -20,
bottom: -4,
}}
xAxisDataKey="year"
Expand Down
14 changes: 4 additions & 10 deletions client/src/containers/projects/detail/dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,16 +179,13 @@ export default function ProjectDashboard({ id }: { id: string }) {
year,
uv,
}))}
activeStyles={{
stroke: 'yellow',
}}
barDataKey="uv"
barRadius={[20, 20, 20, 20]}
fillBar="#70CCB0"
margin={{
top: 2,
right: 2,
left: -40,
right: 10,
left: -20,
bottom: -4,
}}
xAxisDataKey="year"
Expand All @@ -211,16 +208,13 @@ export default function ProjectDashboard({ id }: { id: string }) {
year,
uv,
}))}
activeStyles={{
stroke: 'yellow',
}}
barDataKey="uv"
barRadius={[20, 20, 20, 20]}
fillBar="#70B6CC"
margin={{
top: 2,
right: 2,
left: -40,
right: 10,
left: -20,
bottom: -4,
}}
xAxisDataKey="year"
Expand Down
14 changes: 4 additions & 10 deletions client/src/containers/projects/stats.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,16 +190,13 @@ export default function Stats() {
year,
uv,
}))}
activeStyles={{
stroke: 'yellow',
}}
barDataKey="uv"
barRadius={[20, 20, 20, 20]}
fillBar="#70CCB0"
margin={{
top: 2,
right: 2,
left: -36,
right: 10,
left: -20,
bottom: -4,
}}
xAxisDataKey="year"
Expand Down Expand Up @@ -248,16 +245,13 @@ export default function Stats() {
year,
uv,
}))}
activeStyles={{
stroke: 'yellow',
}}
barDataKey="uv"
barRadius={[20, 20, 20, 20]}
fillBar="#70B6CC"
margin={{
top: 2,
right: 2,
left: -36,
right: 10,
left: -20,
bottom: -4,
}}
xAxisDataKey="year"
Expand Down
5 changes: 5 additions & 0 deletions client/tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,10 @@ module.exports = {
900: '#B00000',
},
},
backgroundImage: {
'gradient-to-b': 'linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%)',
'gradient-to-t': 'linear-gradient(0deg, #FFFFFF, #FFFFFF)',
},
boxShadow: {
sm: '0px 1px 2px 0px #0000000D',
base: '0px 1px 3px 0px #0000001A, 0px 1px 2px 0px #0000000F',
Expand All @@ -93,6 +97,7 @@ module.exports = {
'2xl': '0px 25px 50px -12px #00000040',
inner: '0px 0px 5px 1px #00000029 inset',
legend: '0px 0px 10px 0px rgba(193, 186, 186, 0.25)',
tooltip: '0px 1px 8px 0px rgba(83, 85, 155, 0.18)',
},
borderRadius: {
'4xl': '32px',
Expand Down

0 comments on commit fae6263

Please sign in to comment.