mirror of
https://github.com/hanzoai/forge.git
synced 2026-10-30 15:00:39 +00:00
zeekayandHanzo Dev
412997543a
- svg icon set: gitea-* → hanzo-* (60 icons — the names render into the DOM as class attributes on every page); webhook-type icon content replaced: the white Gitea TEACUP → the Hanzo mark (currentColor). - Actions bot identity: gitea-actions / 'Gitea Actions' / [email protected] → hanzo-actions / 'Hanzo Actions' / [email protected] — this signs every Actions-generated commit. Virtual user (id -2, no DB row) so no migration; old git commits keep their historical author. Legacy name stays reserved so nobody can squat it. - emoji defaults: :gitea:/:gogs:/:codeberg: ripped (pngs deleted); kept git/github/gitlab (real interop marks). - external-render seam tokens (script#, query params, data-attr, CSS var), EasyMDE toolbar keys, theme meta-info marker gitea-theme-meta-info → hanzo-theme-meta-info (parser + all 9 theme files + tests). - meta keywords default → git,self-hosted,hanzo; update-checker cron now DISABLED by default + pointed at hanzoai/git releases (was phoning dl.gitea.com weekly and comparing against the wrong product's versions). - user-visible snippets/links: cargo registry name, debian keyring paths, LDAP filter placeholders, install placeholders, home/appearance/admin links, swagger profile-URL description, oauth2 modal DOM ids, web_src module gitea-actions.ts → actions-types.ts. - KEPT (functional, not brand): webhook TYPE key 'gitea' + /gitea/new route (existing hooks), ssh-keygen -n gitea signing namespace (verification compat), 'gitea doctor' CLI examples (actual binary name), migrate-from- Gitea interop naming, swagger enum values. Co-authored-by: Hanzo Dev <[email protected]>
152 lines
3.5 KiB
Vue
152 lines
3.5 KiB
Vue
<script lang="ts" setup>
|
|
import {SvgIcon} from '../svg.ts';
|
|
import {
|
|
Chart,
|
|
Tooltip,
|
|
BarElement,
|
|
LinearScale,
|
|
TimeScale,
|
|
type ChartOptions,
|
|
type ChartData,
|
|
type ChartDataset,
|
|
} from 'chart.js';
|
|
import {GET} from '../modules/fetch.ts';
|
|
import {Bar} from 'vue-chartjs';
|
|
import {
|
|
startDaysBetween,
|
|
firstStartDateAfterDate,
|
|
fillEmptyStartDaysWithZeroes,
|
|
type DayData,
|
|
type DayDataObject,
|
|
} from '../utils/time.ts';
|
|
import {chartJsColors} from '../utils/color.ts';
|
|
import {errorMessage} from '../modules/errors.ts';
|
|
import {sleep} from '../utils.ts';
|
|
import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
|
|
import {onMounted, ref, shallowRef} from 'vue';
|
|
|
|
const {pageData} = window.config;
|
|
|
|
Chart.defaults.color = chartJsColors.text;
|
|
Chart.defaults.borderColor = chartJsColors.border;
|
|
|
|
Chart.register(
|
|
TimeScale,
|
|
LinearScale,
|
|
BarElement,
|
|
Tooltip,
|
|
);
|
|
|
|
defineProps<{
|
|
locale: {
|
|
loadingTitle: string;
|
|
loadingTitleFailed: string;
|
|
loadingInfo: string;
|
|
};
|
|
}>();
|
|
|
|
const isLoading = shallowRef(false);
|
|
const errorText = shallowRef('');
|
|
const repoLink = pageData.repoLink!;
|
|
const data = ref<DayData[]>([]);
|
|
|
|
onMounted(() => {
|
|
fetchGraphData();
|
|
});
|
|
|
|
async function fetchGraphData() {
|
|
isLoading.value = true;
|
|
try {
|
|
let response: Response;
|
|
do {
|
|
response = await GET(`${repoLink}/activity/recent-commits/data`);
|
|
if (response.status === 202) {
|
|
await sleep(1000); // wait for 1 second before retrying
|
|
}
|
|
} while (response.status === 202);
|
|
if (response.ok) {
|
|
const dayDataObj: DayDataObject = await response.json();
|
|
const start = Object.values(dayDataObj)[0].week;
|
|
const end = firstStartDateAfterDate(new Date());
|
|
const startDays = startDaysBetween(start, end);
|
|
data.value = fillEmptyStartDaysWithZeroes(startDays, dayDataObj).slice(-52);
|
|
errorText.value = '';
|
|
} else {
|
|
errorText.value = response.statusText;
|
|
}
|
|
} catch (err) {
|
|
errorText.value = errorMessage(err);
|
|
} finally {
|
|
isLoading.value = false;
|
|
}
|
|
}
|
|
|
|
function toGraphData(data: DayData[]): ChartData<'bar'> {
|
|
return {
|
|
datasets: [
|
|
{
|
|
data: data.map((i) => ({x: i.week, y: i.commits})),
|
|
label: 'Commits',
|
|
backgroundColor: chartJsColors['commits'],
|
|
borderWidth: 0,
|
|
tension: 0.3,
|
|
} as unknown as ChartDataset<'bar'>,
|
|
],
|
|
};
|
|
}
|
|
|
|
const options: ChartOptions<'bar'> = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
x: {
|
|
type: 'time',
|
|
grid: {
|
|
display: false,
|
|
},
|
|
time: {
|
|
minUnit: 'week',
|
|
},
|
|
ticks: {
|
|
maxRotation: 0,
|
|
maxTicksLimit: 52,
|
|
},
|
|
},
|
|
y: {
|
|
ticks: {
|
|
maxTicksLimit: 6,
|
|
},
|
|
},
|
|
},
|
|
} satisfies ChartOptions;
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="ui header">
|
|
{{ isLoading ? locale.loadingTitle : errorText ? locale.loadingTitleFailed: "Number of commits in the past year" }}
|
|
</div>
|
|
<div class="tw-flex ui segment main-graph">
|
|
<div v-if="isLoading || errorText !== ''" class="tw-m-auto">
|
|
<div v-if="isLoading">
|
|
<SvgIcon name="hanzo-running" class="tw-mr-2 rotate-clockwise"/>
|
|
{{ locale.loadingInfo }}
|
|
</div>
|
|
<div v-else class="tw-text-red">
|
|
<SvgIcon name="octicon-x-circle-fill"/>
|
|
{{ errorText }}
|
|
</div>
|
|
</div>
|
|
<Bar
|
|
v-memo="data" v-if="data.length !== 0"
|
|
:data="toGraphData(data)" :options="options"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.main-graph {
|
|
height: 250px;
|
|
}
|
|
</style>
|