Skip to content

Commit

Permalink
feat: Option to change color scheme githubocto#40
Browse files Browse the repository at this point in the history
  • Loading branch information
repo-visualizer committed Mar 9, 2022
1 parent b6ef9a2 commit 81bbabb
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 22 deletions.
2 changes: 1 addition & 1 deletion diagram.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 17 additions & 13 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25814,7 +25814,8 @@ var numberOfCommitsAccessor = (d2) => {
var _a;
return ((_a = d2 == null ? void 0 : d2.commits) == null ? void 0 : _a.length) || 0;
};
var Tree = ({ data, filesChanged = [], maxDepth = 9, colorEncoding = "type" }) => {
var Tree = ({ data, filesChanged = [], maxDepth = 9, colorEncoding = "type", customizeFileColors }) => {
const fileColors = { ...language_colors_default, ...customizeFileColors };
const [selectedNodeId, setSelectedNodeId] = (0, import_react2.useState)(null);
const cachedPositions = (0, import_react2.useRef)({});
const cachedOrders = (0, import_react2.useRef)({});
Expand Down Expand Up @@ -25845,9 +25846,9 @@ var Tree = ({ data, filesChanged = [], maxDepth = 9, colorEncoding = "type" }) =
if (isParent) {
const extensions = (0, import_countBy.default)(d2.children, (c3) => c3.extension);
const mainExtension = (_a = (0, import_maxBy.default)((0, import_entries.default)(extensions), ([k, v2]) => v2)) == null ? void 0 : _a[0];
return language_colors_default[mainExtension] || "#CED6E0";
return fileColors[mainExtension] || "#CED6E0";
}
return language_colors_default[d2.extension] || "#CED6E0";
return fileColors[d2.extension] || "#CED6E0";
} else if (colorEncoding === "number-of-changes") {
return colorScale(numberOfCommitsAccessor(d2)) || "#f4f4f4";
} else if (colorEncoding === "last-change") {
Expand All @@ -25857,7 +25858,7 @@ var Tree = ({ data, filesChanged = [], maxDepth = 9, colorEncoding = "type" }) =
const packedData = (0, import_react2.useMemo)(() => {
if (!data)
return [];
const hierarchicalData = hierarchy(processChild(data, getColor, cachedOrders.current)).sum((d2) => d2.value).sort((a2, b) => {
const hierarchicalData = hierarchy(processChild(data, getColor, cachedOrders.current, 0, fileColors)).sum((d2) => d2.value).sort((a2, b) => {
if (b.data.path.startsWith("src/fonts")) {
}
return b.data.sortOrder - a2.data.sortOrder || (b.data.name > a2.data.name ? 1 : -1);
Expand Down Expand Up @@ -25888,9 +25889,9 @@ var Tree = ({ data, filesChanged = [], maxDepth = 9, colorEncoding = "type" }) =
cachedPositions.current[d2.data.path] = [d2.x, d2.y];
});
return children2.slice(0, maxChildren);
}, [data]);
}, [data, fileColors]);
const selectedNode = selectedNodeId && packedData.find((d2) => d2.data.path === selectedNodeId);
const fileTypes = (0, import_uniqBy.default)(packedData.map((d2) => language_colors_default[d2.data.extension] && d2.data.extension)).sort().filter(Boolean);
const fileTypes = (0, import_uniqBy.default)(packedData.map((d2) => fileColors[d2.data.extension] && d2.data.extension)).sort().filter(Boolean);
return /* @__PURE__ */ import_react2.default.createElement("svg", {
width,
height,
Expand Down Expand Up @@ -26047,7 +26048,8 @@ var Tree = ({ data, filesChanged = [], maxDepth = 9, colorEncoding = "type" }) =
dominantBaseline: "middle"
}, label));
}), !filesChanged.length && colorEncoding === "type" && /* @__PURE__ */ import_react2.default.createElement(Legend, {
fileTypes
fileTypes,
fileColors
}), !filesChanged.length && colorEncoding !== "type" && /* @__PURE__ */ import_react2.default.createElement(ColorLegend, {
scale: colorScale,
extent: colorExtent,
Expand Down Expand Up @@ -26088,15 +26090,15 @@ var ColorLegend = ({ scale, extent, colorEncoding }) => {
textAnchor: i ? "end" : "start"
}, formatD(d2))));
};
var Legend = ({ fileTypes = [] }) => {
var Legend = ({ fileTypes = [], fileColors }) => {
return /* @__PURE__ */ import_react2.default.createElement("g", {
transform: `translate(${width - 60}, ${height - fileTypes.length * 15 - 20})`
}, fileTypes.map((extension, i) => /* @__PURE__ */ import_react2.default.createElement("g", {
key: i,
transform: `translate(0, ${i * 15})`
}, /* @__PURE__ */ import_react2.default.createElement("circle", {
r: "5",
fill: language_colors_default[extension]
fill: fileColors[extension]
}), /* @__PURE__ */ import_react2.default.createElement("text", {
x: "10",
style: { fontSize: "14px", fontWeight: 300 },
Expand All @@ -26110,22 +26112,22 @@ var Legend = ({ fileTypes = [] }) => {
}
}, "each dot sized by file size"));
};
var processChild = (child, getColor, cachedOrders, i = 0) => {
var processChild = (child, getColor, cachedOrders, i = 0, fileColors) => {
var _a;
if (!child)
return;
const isRoot = !child.path;
let name = child.name;
let path = child.path;
let children2 = (_a = child == null ? void 0 : child.children) == null ? void 0 : _a.map((c3, i2) => processChild(c3, getColor, cachedOrders, i2));
let children2 = (_a = child == null ? void 0 : child.children) == null ? void 0 : _a.map((c3, i2) => processChild(c3, getColor, cachedOrders, i2, fileColors));
if ((children2 == null ? void 0 : children2.length) === 1) {
name = `${name}/${children2[0].name}`;
path = children2[0].path;
children2 = children2[0].children;
}
const pathWithoutExtension = path == null ? void 0 : path.split(".").slice(0, -1).join(".");
const extension = name == null ? void 0 : name.split(".").slice(-1)[0];
const hasExtension = !!language_colors_default[extension];
const hasExtension = !!fileColors[extension];
if (isRoot && children2) {
const looseChildren = children2 == null ? void 0 : children2.filter((d2) => {
var _a2;
Expand Down Expand Up @@ -26271,6 +26273,7 @@ var main = async () => {
core.endGroup();
const rootPath = core.getInput("root_path") || "";
const maxDepth = core.getInput("max_depth") || 9;
const customizeFileColors = JSON.parse(core.getInput("customize_file_colors") || "{}");
const colorEncoding = core.getInput("color_encoding") || "type";
const commitMessage = core.getInput("commit_message") || "Repo visualizer: updated diagram";
const excludedPathsString = core.getInput("excluded_paths") || "node_modules,bower_components,dist,out,build,eject,.next,.netlify,.yarn,.git,.vscode,package-lock.json,yarn.lock";
Expand All @@ -26282,7 +26285,8 @@ var main = async () => {
const componentCodeString = import_server.default.renderToStaticMarkup(/* @__PURE__ */ import_react3.default.createElement(Tree, {
data,
maxDepth: +maxDepth,
colorEncoding
colorEncoding,
customizeFileColors
}));
const outputFile = core.getInput("output_file") || "./diagram.svg";
core.setOutput("svg", componentCodeString);
Expand Down
18 changes: 11 additions & 7 deletions src/Tree.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import entries from "lodash/entries";
import uniqBy from "lodash/uniqBy";
import flatten from "lodash/flatten";
// file colors are from the github/linguist repo
import fileColors from "./language-colors.json";
import defaultFileColors from "./language-colors.json";
import { CircleText } from "./CircleText";
import {
keepBetween,
Expand All @@ -32,6 +32,7 @@ type Props = {
filesChanged: string[];
maxDepth: number;
colorEncoding: "type" | "number-of-changes" | "last-change"
customizeFileColors?: { [key: string]: string };
};
type ExtendedFileType = {
extension?: string;
Expand All @@ -40,6 +41,7 @@ type ExtendedFileType = {
color?: string;
value?: number;
sortOrder?: number;
fileColors?: { [key: string]: string };
} & FileType;
type ProcessedDataItem = {
data: ExtendedFileType;
Expand All @@ -58,9 +60,10 @@ const maxChildren = 9000;
const lastCommitAccessor = (d) => new Date(d.commits?.[0]?.date + "0");
const numberOfCommitsAccessor = (d) => d?.commits?.length || 0;
export const Tree = (
{ data, filesChanged = [], maxDepth = 9, colorEncoding = "type" }:
{ data, filesChanged = [], maxDepth = 9, colorEncoding = "type", customizeFileColors}:
Props,
) => {
const fileColors = { ...defaultFileColors, ...customizeFileColors };
const [selectedNodeId, setSelectedNodeId] = useState(null);
const cachedPositions = useRef<{ [key: string]: [number, number] }>({});
const cachedOrders = useRef<{ [key: string]: string[] }>({});
Expand Down Expand Up @@ -121,7 +124,7 @@ export const Tree = (
const packedData = useMemo(() => {
if (!data) return [];
const hierarchicalData = hierarchy(
processChild(data, getColor, cachedOrders.current),
processChild(data, getColor, cachedOrders.current, 0, fileColors),
).sum((d) => d.value)
.sort((a, b) => {
if (b.data.path.startsWith("src/fonts")) {
Expand Down Expand Up @@ -171,7 +174,7 @@ export const Tree = (
});

return children.slice(0, maxChildren);
}, [data]);
}, [data, fileColors]);

const selectedNode = selectedNodeId &&
packedData.find((d) => d.data.path === selectedNodeId);
Expand Down Expand Up @@ -379,7 +382,7 @@ export const Tree = (
})}

{!filesChanged.length && colorEncoding === "type" &&
<Legend fileTypes={fileTypes} />}
<Legend fileTypes={fileTypes} fileColors={fileColors}/>}
{!filesChanged.length && colorEncoding !== "type" &&
<ColorLegend scale={colorScale} extent={colorExtent} colorEncoding={colorEncoding} />}
</svg>
Expand Down Expand Up @@ -429,7 +432,7 @@ const ColorLegend = ({ scale, extent, colorEncoding }) => {
);
};

const Legend = ({ fileTypes = [] }) => {
const Legend = ({ fileTypes = [], fileColors}) => {
return (
<g
transform={`translate(${width - 60}, ${height - fileTypes.length * 15 -
Expand Down Expand Up @@ -469,13 +472,14 @@ const processChild = (
getColor,
cachedOrders,
i = 0,
fileColors
): ExtendedFileType => {
if (!child) return;
const isRoot = !child.path;
let name = child.name;
let path = child.path;
let children = child?.children?.map((c, i) =>
processChild(c, getColor, cachedOrders, i)
processChild(c, getColor, cachedOrders, i, fileColors)
);
if (children?.length === 1) {
name = `${name}/${children[0].name}`;
Expand Down
3 changes: 2 additions & 1 deletion src/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const main = async () => {

const rootPath = core.getInput("root_path") || ""; // Micro and minimatch do not support paths starting with ./
const maxDepth = core.getInput("max_depth") || 9
const customizeFileColors = JSON.parse(core.getInput("customize_file_colors") || '{}'); // such as '{"js": "red", "ts": "green"}'
const colorEncoding = core.getInput("color_encoding") || "type"
const commitMessage = core.getInput("commit_message") || "Repo visualizer: updated diagram"
const excludedPathsString = core.getInput("excluded_paths") || "node_modules,bower_components,dist,out,build,eject,.next,.netlify,.yarn,.git,.vscode,package-lock.json,yarn.lock"
Expand All @@ -38,7 +39,7 @@ const main = async () => {
const data = await processDir(rootPath, excludedPaths, excludedGlobs);

const componentCodeString = ReactDOMServer.renderToStaticMarkup(
<Tree data={data} maxDepth={+maxDepth} colorEncoding={colorEncoding} />
<Tree data={data} maxDepth={+maxDepth} colorEncoding={colorEncoding} customizeFileColors={customizeFileColors}/>
);

const outputFile = core.getInput("output_file") || "./diagram.svg"
Expand Down

0 comments on commit 81bbabb

Please sign in to comment.