| | |
|---|
| | | import { QuartzComponentConstructor } from "./types" |
|---|
| | | import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" |
|---|
| | | // @ts-ignore |
|---|
| | | import script from "./scripts/graph.inline" |
|---|
| | | import style from "./styles/graph.scss" |
|---|
| | | import { i18n } from "../i18n" |
|---|
| | | import { classNames } from "../util/lang" |
|---|
| | | |
|---|
| | | export interface D3Config { |
|---|
| | | drag: boolean |
|---|
| | |
|---|
| | | opacityScale: number |
|---|
| | | removeTags: string[] |
|---|
| | | showTags: boolean |
|---|
| | | focusOnHover?: boolean |
|---|
| | | } |
|---|
| | | |
|---|
| | | interface GraphOptions { |
|---|
| | |
|---|
| | | opacityScale: 1, |
|---|
| | | showTags: true, |
|---|
| | | removeTags: [], |
|---|
| | | focusOnHover: false, |
|---|
| | | }, |
|---|
| | | globalGraph: { |
|---|
| | | drag: true, |
|---|
| | |
|---|
| | | opacityScale: 1, |
|---|
| | | showTags: true, |
|---|
| | | removeTags: [], |
|---|
| | | focusOnHover: true, |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | |
|---|
| | | export default ((opts?: GraphOptions) => { |
|---|
| | | function Graph() { |
|---|
| | | const Graph: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => { |
|---|
| | | const localGraph = { ...defaultOptions.localGraph, ...opts?.localGraph } |
|---|
| | | const globalGraph = { ...defaultOptions.globalGraph, ...opts?.globalGraph } |
|---|
| | | return ( |
|---|
| | | <div class="graph"> |
|---|
| | | <h3>Graph View</h3> |
|---|
| | | <div class={classNames(displayClass, "graph")}> |
|---|
| | | <h3>{i18n(cfg.locale).components.graph.title}</h3> |
|---|
| | | <div class="graph-outer"> |
|---|
| | | <div id="graph-container" data-cfg={JSON.stringify(localGraph)}></div> |
|---|
| | | <svg |
|---|
