Skip to content

Commit

Permalink
refactor(client): Display units on top of charts
Browse files Browse the repository at this point in the history
  • Loading branch information
@clementprdhomme
clementprdhomme committed Nov 28, 2024
1 parent eb4cfdf commit 60a11b5
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 54 deletions.
37 changes: 10 additions & 27 deletions client/src/components/interaction-chart/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,40 +21,23 @@ interface InteractionChartProps {
}

const CHART_MIN_HEIGHT = 120;
const CHART_MAX_HEIGHT = 250;
const CHART_MAX_HEIGHT = 270;
const X_AXIS_HEIGHT = 22;
const X_AXIS_OFFSET_RIGHT = 5;
const X_AXIS_TICK_COUNT = 5;
const X_AXIS_TICK_HEIGHT = 5;
const Y_AXIS_WIDTH = 34;
const Y_AXIS_OFFSET_TOP = 5;
const Y_AXIS_OFFSET_TOP = 20;
const Y_AXIS_TICK_WIDTH = 5;
const Y_AXIS_TICK_COUNT = 5;

const InteractionChart = ({ data, loading }: InteractionChartProps) => {
const { parentRef, width } = useParentSize({ ignoreDimensions: ["height"] });
const height = useMemo(
() => Math.max(Math.min(width / 2.7, CHART_MAX_HEIGHT), CHART_MIN_HEIGHT),
() => Math.max(Math.min(width / 2.35, CHART_MAX_HEIGHT), CHART_MIN_HEIGHT),
[width],
);

const unitWidth = useMemo(() => {
if (loading || !data) {
return 0;
}

const subtract =
data.unit?.split("").reduce((res, char) => {
if (char === "˚" || char === "/" || char === " ") {
return res - 6;
}

return res;
}, Y_AXIS_TICK_WIDTH) ?? Y_AXIS_TICK_WIDTH;

return (data.unit?.length ?? 0) * 8 + subtract;
}, [data, loading]);

const xScale = useMemo(() => {
if (loading || !data) {
return undefined;
Expand All @@ -63,11 +46,11 @@ const InteractionChart = ({ data, loading }: InteractionChartProps) => {
const xValues = data.data.map(({ x }) => x).sort();

return scaleTime({
range: [0, width - Y_AXIS_WIDTH - X_AXIS_OFFSET_RIGHT - unitWidth],
range: [0, width - Y_AXIS_WIDTH - X_AXIS_OFFSET_RIGHT],
domain: [new Date(xValues[0]), new Date(xValues.slice(-1)[0])],
nice: X_AXIS_TICK_COUNT,
});
}, [width, data, loading, unitWidth]);
}, [width, data, loading]);

const yScale = useMemo(() => {
if (loading || !data) {
Expand Down Expand Up @@ -127,7 +110,7 @@ const InteractionChart = ({ data, loading }: InteractionChartProps) => {
<svg width={width} height={height}>
<Group left={Y_AXIS_WIDTH}>
<GridRows
width={width - Y_AXIS_WIDTH - unitWidth}
width={width - Y_AXIS_WIDTH}
height={height - X_AXIS_HEIGHT - Y_AXIS_OFFSET_TOP}
scale={yScale}
numTicks={Y_AXIS_TICK_COUNT}
Expand All @@ -138,7 +121,7 @@ const InteractionChart = ({ data, loading }: InteractionChartProps) => {
/>
<GridColumns
top={Y_AXIS_OFFSET_TOP}
width={width - X_AXIS_OFFSET_RIGHT - unitWidth}
width={width - X_AXIS_OFFSET_RIGHT}
height={height - X_AXIS_HEIGHT - Y_AXIS_OFFSET_TOP}
scale={xScale}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
Expand Down Expand Up @@ -173,7 +156,7 @@ const InteractionChart = ({ data, loading }: InteractionChartProps) => {
scale={xScale}
top={Y_AXIS_OFFSET_TOP}
numTicks={X_AXIS_TICK_COUNT}
tickLength={Y_AXIS_OFFSET_TOP}
tickLength={X_AXIS_TICK_HEIGHT}
tickComponent={() => null}
tickLabelProps={xAxisTickLabelProps}
tickClassName="[&>line]:stroke-casper-blue-400/50"
Expand All @@ -191,8 +174,8 @@ const InteractionChart = ({ data, loading }: InteractionChartProps) => {
</Group>
<Text
x={width}
y={Y_AXIS_OFFSET_TOP}
dy={5}
y={0}
dy={10}
textAnchor="end"
className="text-right font-sans text-[11px] text-rhino-blue-950"
>
Expand Down
37 changes: 10 additions & 27 deletions client/src/components/year-chart/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,50 +27,33 @@ interface YearChartProps {
}

const CHART_MIN_HEIGHT = 120;
const CHART_MAX_HEIGHT = 250;
const CHART_MAX_HEIGHT = 270;
const X_AXIS_HEIGHT = 22;
const X_AXIS_OFFSET_RIGHT = 5;
const X_AXIS_TICK_HEIGHT = 5;
const Y_AXIS_WIDTH = 34;
const Y_AXIS_OFFSET_TOP = 5;
const Y_AXIS_OFFSET_TOP = 20;
const Y_AXIS_TICK_WIDTH = 5;
const Y_AXIS_TICK_COUNT = 5;
const GRADIENT_OPACITY_EXTENT = [0.9, 0.7];

const YearChart = ({ data, date, loading, active }: YearChartProps) => {
const { parentRef, width } = useParentSize({ ignoreDimensions: ["height"] });
const height = useMemo(
() => Math.max(Math.min(width / 2.7, CHART_MAX_HEIGHT), CHART_MIN_HEIGHT),
() => Math.max(Math.min(width / 2.35, CHART_MAX_HEIGHT), CHART_MIN_HEIGHT),
[width],
);

const unitWidth = useMemo(() => {
if (loading || !data) {
return 0;
}

const subtract =
data.unit?.split("").reduce((res, char) => {
if (char === "˚" || char === "/" || char === " ") {
return res - 6;
}

return res;
}, Y_AXIS_TICK_WIDTH) ?? Y_AXIS_TICK_WIDTH;

return (data.unit?.length ?? 0) * 8 + subtract;
}, [data, loading]);

const xScale = useMemo(() => {
if (loading || !data) {
return undefined;
}

return scalePoint({
range: [0, width - Y_AXIS_WIDTH - X_AXIS_OFFSET_RIGHT - unitWidth],
range: [0, width - Y_AXIS_WIDTH - X_AXIS_OFFSET_RIGHT],
domain: data.data.map(({ x }) => x),
});
}, [width, data, loading, unitWidth]);
}, [width, data, loading]);

const yScale = useMemo(() => {
if (loading || !data) {
Expand Down Expand Up @@ -182,7 +165,7 @@ const YearChart = ({ data, date, loading, active }: YearChartProps) => {
</LinearGradient>
<Group left={Y_AXIS_WIDTH}>
<GridRows
width={width - Y_AXIS_WIDTH - unitWidth}
width={width - Y_AXIS_WIDTH}
height={height - X_AXIS_HEIGHT - Y_AXIS_OFFSET_TOP}
scale={yScale}
numTicks={Y_AXIS_TICK_COUNT}
Expand All @@ -193,7 +176,7 @@ const YearChart = ({ data, date, loading, active }: YearChartProps) => {
/>
<GridColumns
top={Y_AXIS_OFFSET_TOP}
width={width - X_AXIS_OFFSET_RIGHT - unitWidth}
width={width - X_AXIS_OFFSET_RIGHT}
height={height - X_AXIS_HEIGHT - Y_AXIS_OFFSET_TOP}
scale={xScale}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
Expand Down Expand Up @@ -232,7 +215,7 @@ const YearChart = ({ data, date, loading, active }: YearChartProps) => {
<AxisTop
scale={xScale}
top={Y_AXIS_OFFSET_TOP}
tickLength={Y_AXIS_OFFSET_TOP}
tickLength={X_AXIS_TICK_HEIGHT}
tickComponent={() => null}
tickLabelProps={xAxisTickLabelProps}
tickClassName="[&>line]:stroke-casper-blue-400/50"
Expand All @@ -258,8 +241,8 @@ const YearChart = ({ data, date, loading, active }: YearChartProps) => {
</Group>
<Text
x={width}
y={Y_AXIS_OFFSET_TOP}
dy={5}
y={0}
dy={10}
textAnchor="end"
className="text-right font-sans text-[11px] text-rhino-blue-950"
>
Expand Down

0 comments on commit 60a11b5

Please sign in to comment.