Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commit81bbabb

Browse files
author
repo-visualizer
committed
feat: Option to change color scheme#40
1 parentb6ef9a2 commit81bbabb

File tree

4 files changed

+31
-22
lines changed

4 files changed

+31
-22
lines changed

‎diagram.svg

Lines changed: 1 addition & 1 deletion
Loading

‎index.js

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -25814,7 +25814,8 @@ var numberOfCommitsAccessor = (d2) => {
2581425814
var _a;
2581525815
return ((_a = d2 == null ? void 0 : d2.commits) == null ? void 0 : _a.length) || 0;
2581625816
};
25817-
var Tree = ({ data, filesChanged = [], maxDepth = 9, colorEncoding = "type" }) => {
25817+
var Tree = ({ data, filesChanged = [], maxDepth = 9, colorEncoding = "type", customizeFileColors }) => {
25818+
const fileColors = { ...language_colors_default, ...customizeFileColors };
2581825819
const [selectedNodeId, setSelectedNodeId] = (0, import_react2.useState)(null);
2581925820
const cachedPositions = (0, import_react2.useRef)({});
2582025821
const cachedOrders = (0, import_react2.useRef)({});
@@ -25845,9 +25846,9 @@ var Tree = ({ data, filesChanged = [], maxDepth = 9, colorEncoding = "type" }) =
2584525846
if (isParent) {
2584625847
const extensions = (0, import_countBy.default)(d2.children, (c3) => c3.extension);
2584725848
const mainExtension = (_a = (0, import_maxBy.default)((0, import_entries.default)(extensions), ([k, v2]) => v2)) == null ? void 0 : _a[0];
25848-
returnlanguage_colors_default[mainExtension] || "#CED6E0";
25849+
returnfileColors[mainExtension] || "#CED6E0";
2584925850
}
25850-
returnlanguage_colors_default[d2.extension] || "#CED6E0";
25851+
returnfileColors[d2.extension] || "#CED6E0";
2585125852
} else if (colorEncoding === "number-of-changes") {
2585225853
return colorScale(numberOfCommitsAccessor(d2)) || "#f4f4f4";
2585325854
} else if (colorEncoding === "last-change") {
@@ -25857,7 +25858,7 @@ var Tree = ({ data, filesChanged = [], maxDepth = 9, colorEncoding = "type" }) =
2585725858
const packedData = (0, import_react2.useMemo)(() => {
2585825859
if (!data)
2585925860
return [];
25860-
const hierarchicalData = hierarchy(processChild(data, getColor, cachedOrders.current)).sum((d2) => d2.value).sort((a2, b) => {
25861+
const hierarchicalData = hierarchy(processChild(data, getColor, cachedOrders.current, 0, fileColors)).sum((d2) => d2.value).sort((a2, b) => {
2586125862
if (b.data.path.startsWith("src/fonts")) {
2586225863
}
2586325864
return b.data.sortOrder - a2.data.sortOrder || (b.data.name > a2.data.name ? 1 : -1);
@@ -25888,9 +25889,9 @@ var Tree = ({ data, filesChanged = [], maxDepth = 9, colorEncoding = "type" }) =
2588825889
cachedPositions.current[d2.data.path] = [d2.x, d2.y];
2588925890
});
2589025891
return children2.slice(0, maxChildren);
25891-
}, [data]);
25892+
}, [data, fileColors]);
2589225893
const selectedNode = selectedNodeId && packedData.find((d2) => d2.data.path === selectedNodeId);
25893-
const fileTypes = (0, import_uniqBy.default)(packedData.map((d2) =>language_colors_default[d2.data.extension] && d2.data.extension)).sort().filter(Boolean);
25894+
const fileTypes = (0, import_uniqBy.default)(packedData.map((d2) =>fileColors[d2.data.extension] && d2.data.extension)).sort().filter(Boolean);
2589425895
return /* @__PURE__ */ import_react2.default.createElement("svg", {
2589525896
width,
2589625897
height,
@@ -26047,7 +26048,8 @@ var Tree = ({ data, filesChanged = [], maxDepth = 9, colorEncoding = "type" }) =
2604726048
dominantBaseline: "middle"
2604826049
}, label));
2604926050
}), !filesChanged.length && colorEncoding === "type" && /* @__PURE__ */ import_react2.default.createElement(Legend, {
26050-
fileTypes
26051+
fileTypes,
26052+
fileColors
2605126053
}), !filesChanged.length && colorEncoding !== "type" && /* @__PURE__ */ import_react2.default.createElement(ColorLegend, {
2605226054
scale: colorScale,
2605326055
extent: colorExtent,
@@ -26088,15 +26090,15 @@ var ColorLegend = ({ scale, extent, colorEncoding }) => {
2608826090
textAnchor: i ? "end" : "start"
2608926091
}, formatD(d2))));
2609026092
};
26091-
var Legend = ({ fileTypes = [] }) => {
26093+
var Legend = ({ fileTypes = [], fileColors }) => {
2609226094
return /* @__PURE__ */ import_react2.default.createElement("g", {
2609326095
transform: `translate(${width - 60}, ${height - fileTypes.length * 15 - 20})`
2609426096
}, fileTypes.map((extension, i) => /* @__PURE__ */ import_react2.default.createElement("g", {
2609526097
key: i,
2609626098
transform: `translate(0, ${i * 15})`
2609726099
}, /* @__PURE__ */ import_react2.default.createElement("circle", {
2609826100
r: "5",
26099-
fill:language_colors_default[extension]
26101+
fill:fileColors[extension]
2610026102
}), /* @__PURE__ */ import_react2.default.createElement("text", {
2610126103
x: "10",
2610226104
style: { fontSize: "14px", fontWeight: 300 },
@@ -26110,22 +26112,22 @@ var Legend = ({ fileTypes = [] }) => {
2611026112
}
2611126113
}, "each dot sized by file size"));
2611226114
};
26113-
var processChild = (child, getColor, cachedOrders, i = 0) => {
26115+
var processChild = (child, getColor, cachedOrders, i = 0, fileColors) => {
2611426116
var _a;
2611526117
if (!child)
2611626118
return;
2611726119
const isRoot = !child.path;
2611826120
let name = child.name;
2611926121
let path = child.path;
26120-
let children2 = (_a = child == null ? void 0 : child.children) == null ? void 0 : _a.map((c3, i2) => processChild(c3, getColor, cachedOrders, i2));
26122+
let children2 = (_a = child == null ? void 0 : child.children) == null ? void 0 : _a.map((c3, i2) => processChild(c3, getColor, cachedOrders, i2, fileColors));
2612126123
if ((children2 == null ? void 0 : children2.length) === 1) {
2612226124
name = `${name}/${children2[0].name}`;
2612326125
path = children2[0].path;
2612426126
children2 = children2[0].children;
2612526127
}
2612626128
const pathWithoutExtension = path == null ? void 0 : path.split(".").slice(0, -1).join(".");
2612726129
const extension = name == null ? void 0 : name.split(".").slice(-1)[0];
26128-
const hasExtension = !!language_colors_default[extension];
26130+
const hasExtension = !!fileColors[extension];
2612926131
if (isRoot && children2) {
2613026132
const looseChildren = children2 == null ? void 0 : children2.filter((d2) => {
2613126133
var _a2;
@@ -26271,6 +26273,7 @@ var main = async () => {
2627126273
core.endGroup();
2627226274
const rootPath = core.getInput("root_path") || "";
2627326275
const maxDepth = core.getInput("max_depth") || 9;
26276+
const customizeFileColors = JSON.parse(core.getInput("customize_file_colors") || "{}");
2627426277
const colorEncoding = core.getInput("color_encoding") || "type";
2627526278
const commitMessage = core.getInput("commit_message") || "Repo visualizer: updated diagram";
2627626279
const excludedPathsString = core.getInput("excluded_paths") || "node_modules,bower_components,dist,out,build,eject,.next,.netlify,.yarn,.git,.vscode,package-lock.json,yarn.lock";
@@ -26282,7 +26285,8 @@ var main = async () => {
2628226285
const componentCodeString = import_server.default.renderToStaticMarkup(/* @__PURE__ */ import_react3.default.createElement(Tree, {
2628326286
data,
2628426287
maxDepth: +maxDepth,
26285-
colorEncoding
26288+
colorEncoding,
26289+
customizeFileColors
2628626290
}));
2628726291
const outputFile = core.getInput("output_file") || "./diagram.svg";
2628826292
core.setOutput("svg", componentCodeString);

‎src/Tree.tsx

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import entries from "lodash/entries";
1919
importuniqByfrom"lodash/uniqBy";
2020
importflattenfrom"lodash/flatten";
2121
// file colors are from the github/linguist repo
22-
importfileColorsfrom"./language-colors.json";
22+
importdefaultFileColorsfrom"./language-colors.json";
2323
import{CircleText}from"./CircleText";
2424
import{
2525
keepBetween,
@@ -32,6 +32,7 @@ type Props = {
3232
filesChanged:string[];
3333
maxDepth:number;
3434
colorEncoding:"type"|"number-of-changes"|"last-change"
35+
customizeFileColors?:{[key:string]:string};
3536
};
3637
typeExtendedFileType={
3738
extension?:string;
@@ -40,6 +41,7 @@ type ExtendedFileType = {
4041
color?:string;
4142
value?:number;
4243
sortOrder?:number;
44+
fileColors?:{[key:string]:string};
4345
}&FileType;
4446
typeProcessedDataItem={
4547
data:ExtendedFileType;
@@ -58,9 +60,10 @@ const maxChildren = 9000;
5860
constlastCommitAccessor=(d)=>newDate(d.commits?.[0]?.date+"0");
5961
constnumberOfCommitsAccessor=(d)=>d?.commits?.length||0;
6062
exportconstTree=(
61-
{ data, filesChanged=[], maxDepth=9, colorEncoding="type"}:
63+
{ data, filesChanged=[], maxDepth=9, colorEncoding="type", customizeFileColors}:
6264
Props,
6365
)=>{
66+
constfileColors={ ...defaultFileColors, ...customizeFileColors};
6467
const[selectedNodeId,setSelectedNodeId]=useState(null);
6568
constcachedPositions=useRef<{[key:string]:[number,number]}>({});
6669
constcachedOrders=useRef<{[key:string]:string[]}>({});
@@ -121,7 +124,7 @@ export const Tree = (
121124
constpackedData=useMemo(()=>{
122125
if(!data)return[];
123126
consthierarchicalData=hierarchy(
124-
processChild(data,getColor,cachedOrders.current),
127+
processChild(data,getColor,cachedOrders.current,0,fileColors),
125128
).sum((d)=>d.value)
126129
.sort((a,b)=>{
127130
if(b.data.path.startsWith("src/fonts")){
@@ -171,7 +174,7 @@ export const Tree = (
171174
});
172175

173176
returnchildren.slice(0,maxChildren);
174-
},[data]);
177+
},[data,fileColors]);
175178

176179
constselectedNode=selectedNodeId&&
177180
packedData.find((d)=>d.data.path===selectedNodeId);
@@ -379,7 +382,7 @@ export const Tree = (
379382
})}
380383

381384
{!filesChanged.length&&colorEncoding==="type"&&
382-
<LegendfileTypes={fileTypes}/>}
385+
<LegendfileTypes={fileTypes}fileColors={fileColors}/>}
383386
{!filesChanged.length&&colorEncoding!=="type"&&
384387
<ColorLegendscale={colorScale}extent={colorExtent}colorEncoding={colorEncoding}/>}
385388
</svg>
@@ -429,7 +432,7 @@ const ColorLegend = ({ scale, extent, colorEncoding }) => {
429432
);
430433
};
431434

432-
constLegend=({ fileTypes=[]})=>{
435+
constLegend=({ fileTypes=[], fileColors})=>{
433436
return(
434437
<g
435438
transform={`translate(${width-60},${height-fileTypes.length*15-
@@ -469,13 +472,14 @@ const processChild = (
469472
getColor,
470473
cachedOrders,
471474
i=0,
475+
fileColors
472476
):ExtendedFileType=>{
473477
if(!child)return;
474478
constisRoot=!child.path;
475479
letname=child.name;
476480
letpath=child.path;
477481
letchildren=child?.children?.map((c,i)=>
478-
processChild(c,getColor,cachedOrders,i)
482+
processChild(c,getColor,cachedOrders,i,fileColors)
479483
);
480484
if(children?.length===1){
481485
name=`${name}/${children[0].name}`;

‎src/index.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ const main = async () => {
2525

2626
constrootPath=core.getInput("root_path")||"";// Micro and minimatch do not support paths starting with ./
2727
constmaxDepth=core.getInput("max_depth")||9
28+
constcustomizeFileColors=JSON.parse(core.getInput("customize_file_colors")||'{}');// such as '{"js": "red", "ts": "green"}'
2829
constcolorEncoding=core.getInput("color_encoding")||"type"
2930
constcommitMessage=core.getInput("commit_message")||"Repo visualizer: updated diagram"
3031
constexcludedPathsString=core.getInput("excluded_paths")||"node_modules,bower_components,dist,out,build,eject,.next,.netlify,.yarn,.git,.vscode,package-lock.json,yarn.lock"
@@ -38,7 +39,7 @@ const main = async () => {
3839
constdata=awaitprocessDir(rootPath,excludedPaths,excludedGlobs);
3940

4041
constcomponentCodeString=ReactDOMServer.renderToStaticMarkup(
41-
<Treedata={data}maxDepth={+maxDepth}colorEncoding={colorEncoding}/>
42+
<Treedata={data}maxDepth={+maxDepth}colorEncoding={colorEncoding}customizeFileColors={customizeFileColors}/>
4243
);
4344

4445
constoutputFile=core.getInput("output_file")||"./diagram.svg"

0 commit comments

Comments
 (0)

[8]ページ先頭

©2009-2025 Movatter.jp