mirror of
https://github.com/codedownio/time-ghc-modules.git
synced 2024-09-11 05:25:40 +03:00
Break bar visualization into its own file and add tsconfig
This commit is contained in:
parent
e800983727
commit
426f84e0ac
85
src/App.tsx
85
src/App.tsx
@ -2,35 +2,16 @@
|
||||
import MenuItem from "@material-ui/core/MenuItem";
|
||||
import Select from "@material-ui/core/Select";
|
||||
|
||||
import {map, reduce, size} from "lodash";
|
||||
import {reduce} from "lodash";
|
||||
import * as React from "react";
|
||||
|
||||
import Chart from "./Chart";
|
||||
import Bars from "./Bars";
|
||||
import {formatBytes, formatTime} from "./Util";
|
||||
|
||||
|
||||
interface Event {
|
||||
module: string;
|
||||
phase: string;
|
||||
time: number;
|
||||
alloc: number;
|
||||
};
|
||||
|
||||
interface ModuleData {
|
||||
phasesByAlloc: Array<{phase: string, alloc: number}>;
|
||||
phasesByTime: Array<{phase: string, time: number}>;
|
||||
modulesByAlloc: Array<{module: string, alloc: number}>;
|
||||
modulesByTime: Array<{module: string, time: number}>;
|
||||
modules: Array<{module: string;}>;
|
||||
data: Array<Event>;
|
||||
}
|
||||
|
||||
// @ts-ignore, inserted into the HTML
|
||||
const data: ModuleData = window.module_data;
|
||||
|
||||
type Visualization = "bars" | "treemap";
|
||||
type Aggregate = "time" | "alloc";
|
||||
|
||||
export default function App() {
|
||||
const [visualization, setVisualization] = React.useState<Visualization>("bars");
|
||||
const [aggregate, setAggregate] = React.useState<Aggregate>("time");
|
||||
@ -41,58 +22,6 @@ export default function App() {
|
||||
|
||||
console.log("Got data", data);
|
||||
|
||||
const modulesList = aggregate === "time" ? data.modulesByTime : data.modulesByAlloc;
|
||||
const phasesList = aggregate === "time" ? data.phasesByTime : data.phasesByAlloc;
|
||||
const numModules = size(modulesList);
|
||||
|
||||
const [moduleToIndex, moduleNames] = React.useMemo(() => {
|
||||
const ret = {};
|
||||
const names = [];
|
||||
let counter = 0;
|
||||
for (let module of modulesList) {
|
||||
ret[module.module] = counter++;
|
||||
names.push(module.module);
|
||||
}
|
||||
return [ret, names]
|
||||
}, [modulesList]);
|
||||
|
||||
const series = React.useMemo(() => {
|
||||
const ret = [];
|
||||
|
||||
const phaseToIndex = {};
|
||||
let counter = 0;
|
||||
|
||||
// Allocate empty vectors for every series
|
||||
for (let phase of phasesList) {
|
||||
const name = phase.phase;
|
||||
phaseToIndex[name] = counter++;
|
||||
ret.push({name, data: Array(numModules).fill(0)})
|
||||
}
|
||||
|
||||
// Pass over all the data
|
||||
for (let event of data.data) {
|
||||
ret[phaseToIndex[event.phase]].data[moduleToIndex[event.module]] = event[aggregate];
|
||||
}
|
||||
|
||||
console.log("Made series", ret);
|
||||
|
||||
return ret;
|
||||
}, [phasesList, moduleToIndex, aggregate]);
|
||||
|
||||
const [finalSeries, finalModuleNames] = React.useMemo(() => {
|
||||
const finalSeries = map(series, (x) => ({
|
||||
name: x.name,
|
||||
data: x.data.slice(0, numModulesToShow)
|
||||
}));
|
||||
|
||||
const finalModuleNames = moduleNames.slice(0, numModulesToShow);
|
||||
|
||||
console.log("Made finalSeries", finalSeries);
|
||||
console.log("Made finalModuleNames", finalModuleNames);
|
||||
|
||||
return [finalSeries, finalModuleNames];
|
||||
}, [series, moduleNames, numModulesToShow]);
|
||||
|
||||
const handleSetVisualization = React.useCallback((event) => setVisualization(event.target.value), [setVisualization]);
|
||||
const handleSetAggregate = React.useCallback((event) => setAggregate(event.target.value), [setAggregate]);
|
||||
const handleSetNumModulesToShow = React.useCallback((event) => setNumModulesToShow(event.target.value), [setNumModulesToShow]);
|
||||
@ -140,11 +69,11 @@ export default function App() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Chart title={"Build report by " + aggregate}
|
||||
series={finalSeries}
|
||||
categories={finalModuleNames}
|
||||
xLabel={aggregate === "time" ? "Time" : "Allocations"}
|
||||
formatter={aggregate === "time" ? formatTime : formatBytes} />
|
||||
{visualization === "bars" &&
|
||||
<Bars aggregate={aggregate}
|
||||
data={data}
|
||||
numModulesToShow={numModulesToShow} />
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -8,13 +8,13 @@ interface Props {
|
||||
series: Array<{name: string; data: number[];}>;
|
||||
categories: Array<string | number>;
|
||||
xLabel: string;
|
||||
formatter: (value: number) => string;
|
||||
formatter: (value: number | string) => string;
|
||||
};
|
||||
|
||||
const baseHeight = 200;
|
||||
|
||||
export default function ApexChart({title, series, categories, xLabel, formatter}) {
|
||||
const options = React.useMemo(() => ({
|
||||
export default function ApexChart({title, series, categories, xLabel, formatter}: Props) {
|
||||
const options: ApexCharts.ApexOptions = React.useMemo(() => ({
|
||||
chart: {
|
||||
animations: {
|
||||
enabled: false
|
||||
|
19
src/types.d.ts
vendored
Normal file
19
src/types.d.ts
vendored
Normal file
@ -0,0 +1,19 @@
|
||||
|
||||
type Visualization = "bars" | "treemap";
|
||||
type Aggregate = "time" | "alloc";
|
||||
|
||||
interface Event {
|
||||
module: string;
|
||||
phase: string;
|
||||
time: number;
|
||||
alloc: number;
|
||||
}
|
||||
|
||||
interface ModuleData {
|
||||
phasesByAlloc: Array<{phase: string, alloc: number}>;
|
||||
phasesByTime: Array<{phase: string, time: number}>;
|
||||
modulesByAlloc: Array<{module: string, alloc: number}>;
|
||||
modulesByTime: Array<{module: string, time: number}>;
|
||||
modules: Array<{module: string;}>;
|
||||
data: Array<Event>;
|
||||
}
|
12
tsconfig.json
Normal file
12
tsconfig.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"moduleResolution": "node",
|
||||
"noImplicitAny": false,
|
||||
"removeComments": true,
|
||||
"preserveConstEnums": true,
|
||||
"jsx": "react-jsx",
|
||||
"sourceMap": true
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["node_modules/**/*"]
|
||||
}
|
Loading…
Reference in New Issue
Block a user