| | |
| | | import style from "./styles/graph.scss" |
| | | |
| | | export interface D3Config { |
| | | drag: boolean, |
| | | zoom: boolean, |
| | | depth: number, |
| | | scale: number, |
| | | repelForce: number, |
| | | centerForce: number, |
| | | linkDistance: number, |
| | | fontSize: number, |
| | | drag: boolean |
| | | zoom: boolean |
| | | depth: number |
| | | scale: number |
| | | repelForce: number |
| | | centerForce: number |
| | | linkDistance: number |
| | | fontSize: number |
| | | opacityScale: number |
| | | } |
| | | |
| | | interface GraphOptions { |
| | | localGraph: Partial<D3Config> | undefined, |
| | | localGraph: Partial<D3Config> | undefined |
| | | globalGraph: Partial<D3Config> | undefined |
| | | } |
| | | |
| | |
| | | centerForce: 0.3, |
| | | linkDistance: 30, |
| | | fontSize: 0.6, |
| | | opacityScale: 1 |
| | | opacityScale: 1, |
| | | }, |
| | | globalGraph: { |
| | | drag: true, |
| | |
| | | centerForce: 0.3, |
| | | linkDistance: 30, |
| | | fontSize: 0.6, |
| | | opacityScale: 1 |
| | | } |
| | | opacityScale: 1, |
| | | }, |
| | | } |
| | | |
| | | export default ((opts?: GraphOptions) => { |
| | | function Graph() { |
| | | const localGraph = { ...opts?.localGraph, ...defaultOptions.localGraph } |
| | | const globalGraph = { ...opts?.globalGraph, ...defaultOptions.globalGraph } |
| | | return <div class="graph"> |
| | | <h3>Graph View</h3> |
| | | <div class="graph-outer"> |
| | | <div id="graph-container" data-cfg={JSON.stringify(localGraph)}></div> |
| | | <svg version="1.1" id="global-graph-icon" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px" |
| | | viewBox="0 0 55 55" fill="currentColor" xmlSpace="preserve"> |
| | | <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 |
| | | return ( |
| | | <div class="graph"> |
| | | <h3>Graph View</h3> |
| | | <div class="graph-outer"> |
| | | <div id="graph-container" data-cfg={JSON.stringify(localGraph)}></div> |
| | | <svg |
| | | version="1.1" |
| | | id="global-graph-icon" |
| | | xmlns="http://www.w3.org/2000/svg" |
| | | xmlnsXlink="http://www.w3.org/1999/xlink" |
| | | x="0px" |
| | | y="0px" |
| | | viewBox="0 0 55 55" |
| | | fill="currentColor" |
| | | xmlSpace="preserve" |
| | | > |
| | | <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 |
| | | 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 |
| | |
| | | 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> |
| | | 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> |
| | | </div> |
| | | <div id="global-graph-outer"> |
| | | <div id="global-graph-container" data-cfg={JSON.stringify(globalGraph)}></div> |
| | | </div> |
| | | </div> |
| | | <div id="global-graph-outer"> |
| | | <div id="global-graph-container" data-cfg={JSON.stringify(globalGraph)}></div> |
| | | </div> |
| | | </div> |
| | | ) |
| | | } |
| | | |
| | | Graph.css = style |