mirror of
https://github.com/Drop-OSS/drop.git
synced 2025-11-10 04:22:09 +10:00
* First iteration on the new PieChart component * #128 Adds new admin home page * Fixes code after merging conflicts * Removes empty file * Uses real data for admin home page, and improves style * Reverts debugging code * Defines missing variable * Caches user stats data for admin home page * Typo * Styles improvements * Invalidates cache on signup/signin * Implements top 5 biggest games * Improves styling * Improves style * Using generateManifest to get the proper size * Reading data from cache * Removes unnecessary import * Improves caching mechanism for game sizes * Removes lint errors * Replaces piechart tooltip with colors in legend * Fixes caching * Fixes caching and slight improvement on pie chart colours * Fixes a few bugs related to caching * Fixes bug where app signin didn't refresh cache * feat: style improvements * fix: lint --------- Co-authored-by: DecDuck <declanahofmeyr@gmail.com>
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import Tuple from "~/utils/tuple";
|
|
import type { Slice, SliceData } from "~/components/PieChart/types";
|
|
import { sum, lastItem } from "~/utils/array";
|
|
|
|
export const START = new Tuple(50, 10);
|
|
export const CENTER = new Tuple(50, 50);
|
|
export const RADIUS = 40;
|
|
|
|
export const polarToCartesian = (
|
|
center: Tuple,
|
|
radius: number,
|
|
angleInDegrees: number,
|
|
) => {
|
|
const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180;
|
|
const x = center.x + radius * Math.cos(angleInRadians);
|
|
const y = center.y + radius * Math.sin(angleInRadians);
|
|
return new Tuple(x, y);
|
|
};
|
|
|
|
export const percent2Degrees = (percentage: number) => (360 * percentage) / 100;
|
|
|
|
export function generateSlices(data: SliceData[]): Slice[] {
|
|
return data.reduce((accumulator, currentValue, index, array) => {
|
|
const percentage =
|
|
(currentValue.value * 100) / sum(array.map((slice) => slice.value));
|
|
return [
|
|
...accumulator,
|
|
{
|
|
start: accumulator.length
|
|
? polarToCartesian(
|
|
CENTER,
|
|
RADIUS,
|
|
percent2Degrees(lastItem(accumulator).totalPercentage),
|
|
)
|
|
: START,
|
|
radius: RADIUS,
|
|
percentage: percentage,
|
|
totalPercentage:
|
|
sum(accumulator.map((element) => element.percentage)) + percentage,
|
|
center: CENTER,
|
|
color: PIE_COLOURS[index % PIE_COLOURS.length],
|
|
label: currentValue.label,
|
|
value: currentValue.value,
|
|
},
|
|
];
|
|
}, [] as Slice[]);
|
|
}
|
|
|
|
export const getFlags = (percentage: number) =>
|
|
percentage > 50 ? new Tuple(1, 1) : new Tuple(0, 1);
|