mirror of
https://github.com/quartz-community/graph.git
synced 2026-07-22 02:50:25 +00:00
refactor: align graph component exports with shared types
This commit is contained in:
saberzero1
parent
056973c704
commit
c6a8cbb7e2
3 changed files with 23 additions and 37 deletions
|
|
@ -2,6 +2,8 @@ import type {
|
|||
QuartzComponent,
|
||||
QuartzComponentConstructor,
|
||||
QuartzComponentProps,
|
||||
D3Config,
|
||||
GraphOptions,
|
||||
} from "@quartz-community/types";
|
||||
import { classNames } from "../util/lang";
|
||||
import { i18n } from "../i18n";
|
||||
|
|
@ -9,28 +11,7 @@ import style from "./styles/graph.scss";
|
|||
// @ts-ignore
|
||||
import script from "./scripts/graph.inline.ts";
|
||||
|
||||
export interface D3Config {
|
||||
drag: boolean;
|
||||
zoom: boolean;
|
||||
depth: number;
|
||||
scale: number;
|
||||
repelForce: number;
|
||||
centerForce: number;
|
||||
linkDistance: number;
|
||||
fontSize: number;
|
||||
opacityScale: number;
|
||||
removeTags: string[];
|
||||
showTags: boolean;
|
||||
focusOnHover?: boolean;
|
||||
enableRadial?: boolean;
|
||||
}
|
||||
|
||||
export interface GraphOptions {
|
||||
localGraph?: Partial<D3Config>;
|
||||
globalGraph?: Partial<D3Config>;
|
||||
}
|
||||
|
||||
const defaultOptions = {
|
||||
const defaultOptions: GraphOptions = {
|
||||
localGraph: {
|
||||
drag: true,
|
||||
zoom: true,
|
||||
|
|
@ -42,7 +23,7 @@ const defaultOptions = {
|
|||
fontSize: 0.6,
|
||||
opacityScale: 1,
|
||||
showTags: true,
|
||||
removeTags: [] as string[],
|
||||
removeTags: [],
|
||||
focusOnHover: false,
|
||||
enableRadial: false,
|
||||
},
|
||||
|
|
@ -57,7 +38,7 @@ const defaultOptions = {
|
|||
fontSize: 0.6,
|
||||
opacityScale: 1,
|
||||
showTags: true,
|
||||
removeTags: [] as string[],
|
||||
removeTags: [],
|
||||
focusOnHover: true,
|
||||
enableRadial: true,
|
||||
},
|
||||
|
|
@ -70,7 +51,8 @@ export default ((userOpts?: Partial<GraphOptions>) => {
|
|||
|
||||
return (
|
||||
<div class={classNames(displayClass, "graph")}>
|
||||
<div class="graph-outer" id="graph-container">
|
||||
<h3>{i18n(cfg.locale).components.graph.title}</h3>
|
||||
<div class="graph-outer">
|
||||
<div class="graph-container" data-cfg={JSON.stringify(localGraph)}></div>
|
||||
<button class="global-graph-icon" aria-label="Global Graph">
|
||||
<svg
|
||||
|
|
@ -85,20 +67,21 @@ export default ((userOpts?: Partial<GraphOptions>) => {
|
|||
>
|
||||
<path
|
||||
d="M49,0c-3.309,0-6,2.691-6,6c0,1.035,0.263,2.009,0.726,2.86l-9.829,9.829C32.542,17.634,30.846,17,29,17
|
||||
c-3.313,0-6,2.687-6,6c0,0.753,0.149,1.469,0.401,2.138l-9.913,6.062C12.656,30.878,11.354,30.5,10,30.5
|
||||
c-3.313,0-6,2.687-6,6c0,3.313,2.687,6,6,6c1.355,0,2.657-0.378,3.79-1.029l9.729,6.041C23.337,48.031,23.17,48.5,23,48.5
|
||||
c-3.313,0-6,2.687-6,6s2.687,6,6,6s6-2.687,6-6c0-1.027-0.262-1.991-0.72-2.839l9.865-6.068
|
||||
C38.655,31.878,39.957,32.5,41.5,32.5c3.313,0,6-2.687,6-6c0-1.389-0.475-2.663-1.268-3.684l9.834-9.834
|
||||
C57.091,13.12,58,13.5,59,13.5c3.313,0,6-2.687,6-6S62.313,1.5,59,1.5S53,4.187,53,7.5c0,0.818,0.135,1.605,0.38,2.342
|
||||
L43.75,19.422C42.534,18.538,41.066,18,39.5,18c-3.313,0-6,2.687-6,6c0,0.639,0.108,1.252,0.304,1.826l-9.49,5.805
|
||||
C23.639,31.237,22.859,31,22,31c-3.313,0-6,2.687-6,6s2.687,6,6,6c0.859,0,1.639-0.237,2.314-0.631l9.49,5.805
|
||||
C33.892,43.748,34,44.361,34,45c0,3.313,2.687,6,6,6c1.566,0,3.034-0.538,4.25-1.422l9.63,9.63
|
||||
C53.865,59.895,54,60.682,54,61.5c0,3.313,2.687,6,6,6s6-2.687,6-6S63.313,55.5,60,55.5z"
|
||||
s-3.542,0.634-4.898,1.688l-7.669-7.669C16.785,10.424,17,9.74,17,9c0-2.206-1.794-4-4-4S9,6.794,9,9s1.794,4,4,4
|
||||
c0.74,0,1.424-0.215,2.019-0.567l7.669,7.669C21.634,21.458,21,23.154,21,25s0.634,3.542,1.688,4.897L10.024,42.562
|
||||
C8.958,41.595,7.549,41,6,41c-3.309,0-6,2.691-6,6s2.691,6,6,6s6-2.691,6-6c0-1.035-0.263-2.009-0.726-2.86l12.829-12.829
|
||||
c1.106,0.86,2.44,1.436,3.898,1.619v10.16c-2.833,0.478-5,2.942-5,5.91c0,3.309,2.691,6,6,6s6-2.691,6-6c0-2.967-2.167-5.431-5-5.91
|
||||
v-10.16c1.458-0.183,2.792-0.759,3.898-1.619l7.669,7.669C41.215,39.576,41,40.26,41,41c0,2.206,1.794,4,4,4s4-1.794,4-4
|
||||
s-1.794-4-4-4c-0.74,0-1.424,0.215-2.019,0.567l-7.669-7.669C36.366,28.542,37,26.846,37,25s-0.634-3.542-1.688-4.897l9.665-9.665
|
||||
C46.042,11.405,47.451,12,49,12c3.309,0,6-2.691,6-6S52.309,0,49,0z M11,9c0-1.103,0.897-2,2-2s2,0.897,2,2s-0.897,2-2,2
|
||||
S11,10.103,11,9z M6,51c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4S8.206,51,6,51z M33,49c0,2.206-1.794,4-4,4s-4-1.794-4-4
|
||||
s1.794-4,4-4S33,46.794,33,49z M29,31c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S32.309,31,29,31z M47,41c0,1.103-0.897,2-2,2
|
||||
s-2-0.897-2-2s0.897-2,2-2S47,39.897,47,41z M49,10c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4S51.206,10,49,10z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="global-graph-outer" id="global-graph-container">
|
||||
<div class="global-graph-outer">
|
||||
<div class="global-graph-container" data-cfg={JSON.stringify(globalGraph)}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -110,3 +93,5 @@ export default ((userOpts?: Partial<GraphOptions>) => {
|
|||
|
||||
return Graph;
|
||||
}) satisfies QuartzComponentConstructor;
|
||||
|
||||
export type { GraphOptions, D3Config };
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
export { default as Graph } from "./Graph";
|
||||
export type { GraphOptions, D3Config } from "./Graph";
|
||||
export type { GraphOptions, D3Config } from "@quartz-community/types";
|
||||
|
|
|
|||
|
|
@ -1,2 +1,3 @@
|
|||
export { default as Graph } from "./components/Graph";
|
||||
export type { GraphOptions, D3Config } from "./components/Graph";
|
||||
export type { GraphOptions, D3Config } from "@quartz-community/types";
|
||||
export { manifest } from "./manifest";
|
||||
|
|
|
|||
Loading…
Reference in a new issue