Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 108x 756x 756x 756x 756x 756x 756x 756x 756x 756x 756x 756x 756x 756x 756x 756x 756x 756x 756x 108x 2x 2x 2x 2x 2x 2x 2x 2x 1x 1x | import { type FC, useId } from "react";
import { useControls, Leva } from "leva";
import { Canvas } from "@react-three/fiber";
import { Box, PerspectiveCamera, OrbitControls } from "@react-three/drei";
import { ResizeObserver } from "@juggle/resize-observer";
import type { CalendarYearsData, CalendarWeekData } from "~/types";
import { useGridCalculations } from "~/hooks";
interface TitanicGridsProps {
/** The list of number values per calendar year. */
data: CalendarYearsData;
/** The first year in the dataset. */
startYear: number;
/** The maximum value in the dataset. */
maxValue: number;
}
/** Shows a grid of 3D bar charts to represent the number values per year. */
const TitanicGrids: FC<TitanicGridsProps> = ({ data, startYear, maxValue }) => {
const id = useId();
const { cellSize, cellSpacing, gridSpacing, color, unusedColor, scale } =
useControls("Cells", {
/** The length of each cell in the grid. */
cellSize: {
value: 1.0,
step: 0.05,
min: 1.0,
},
/** The spacing between each cell in the grid. */
cellSpacing: {
value: 0.2,
step: 0.05,
min: 0.1,
},
/** The spacing between each grid in the scene. */
gridSpacing: {
value: 1.4,
step: 0.05,
min: 0.1,
},
/** The color of the regular cells. */
color: "#a0185a",
/** The color of the unused cells. */
unusedColor: "#cccccc",
/** The scale of the cells. */
scale: {
value: 20.0,
step: 1.0,
min: 0.0,
},
});
const { rotate, speed, camera } = useControls("Controls", {
/** The position of the camera. */
camera: [-50, 25, 29],
/** Whether the camera should rotate or not. */
rotate: true,
/** The speed of the camera rotation. */
speed: {
value: 1.0,
step: 0.1,
min: 0.0,
},
});
const light1 = useControls("Light 1", {
/** The position of the light. */
position: {
value: [90, 0, 0],
step: 10,
},
/** The intensity of the light. */
intensity: {
value: 0.8,
step: 1.0,
},
/** The color of the light. */
color: "#ffffff",
/** Whether the light is enabled or not. */
enable: true,
});
const light2 = useControls("Light 2", {
/** The position of the light. */
position: {
value: [-180, 0, 0],
step: 10,
},
/** The intensity of the light. */
intensity: {
value: 0.8,
step: 1.0,
},
/** The color of the light. */
color: "#ffffff",
/** Whether the light is enabled or not. */
enable: true,
});
const { calcCellHeight, calcGridPosition, calcCellPosition, center } =
useGridCalculations(
data,
gridSpacing,
cellSize,
cellSpacing,
scale,
maxValue
);
return (
<>
<Leva collapsed data-testid="titanic-grids-leva" />
<Canvas
resize={{ polyfill: ResizeObserver }}
data-testid="titanic-grids-canvas"
>
<OrbitControls
autoRotate={rotate}
autoRotateSpeed={speed}
target={center}
/>
<PerspectiveCamera makeDefault position={camera} />
<hemisphereLight />
{light1.enable && (
<directionalLight
position={light1.position}
intensity={light1.intensity}
color={light1.color}
/>
)}
{light2.enable && (
<directionalLight
position={light2.position}
intensity={light2.intensity}
color={light2.color}
/>
)}
{data.map((yearData, yearIndex) => {
const forYear = startYear + yearIndex;
const gridPosition = calcGridPosition(yearIndex);
return (
<group key={`${id}-grid-${forYear}`} position={gridPosition}>
{yearData.map((week: CalendarWeekData, weekIndex: number) => {
return week.map((value: number, dayIndex: number) => {
const cellHeight = calcCellHeight(value);
const cellPosition: [number, number, number] = [
calcCellPosition(dayIndex),
cellHeight / 2,
calcCellPosition(weekIndex),
];
return (
<Box
key={`${id}-grid-${weekIndex}-${dayIndex}`}
args={[cellSize, cellHeight, cellSize]}
position={cellPosition}
>
<meshPhongMaterial
color={value < 0 ? unusedColor : color}
/>
</Box>
);
});
})}
</group>
);
})}
</Canvas>
</>
);
};
export default TitanicGrids;
|