wip
This commit is contained in:
NiklasWilhelm
parent
a79cc6c7b2
commit
fe6be569c5
|
|
@ -23,6 +23,7 @@ export default class SpSiteErDiagram extends React.Component<ISpSiteErDiagramPro
|
|||
let spSiteData = await getSPSiteData(this.props.context, true, (progress) => {
|
||||
this.setState({ loadingProgress: progress });
|
||||
});
|
||||
console.log("SPSiteData", spSiteData);
|
||||
// Transform to GoJS Model
|
||||
let goJSNodes = getGoJSNodesFromSPSiteData(spSiteData);
|
||||
// Set State
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ export const initDiagram = () => {
|
|||
{
|
||||
allowDelete: false,
|
||||
allowCopy: false,
|
||||
initialAutoScale: go.Diagram.Uniform,
|
||||
layout: $(go.ForceDirectedLayout),
|
||||
model: $(go.GraphLinksModel,
|
||||
{
|
||||
|
|
@ -56,6 +57,7 @@ export const initDiagram = () => {
|
|||
new go.Binding("text", "name"))
|
||||
);
|
||||
|
||||
|
||||
// define the Node template, representing an entity
|
||||
diagram.nodeTemplate =
|
||||
$(go.Node, "Auto", // the whole node panel
|
||||
|
|
@ -121,8 +123,8 @@ export const initDiagram = () => {
|
|||
$(go.TextBlock, // the "from" label
|
||||
{
|
||||
textAlign: "center",
|
||||
font: "bold 14px sans-serif",
|
||||
stroke: "#1967B3",
|
||||
font: "bold 16px sans-serif",
|
||||
stroke: "#fdb400",
|
||||
segmentIndex: 0,
|
||||
segmentOffset: new go.Point(NaN, NaN),
|
||||
segmentOrientation: go.Link.OrientUpright
|
||||
|
|
@ -131,8 +133,8 @@ export const initDiagram = () => {
|
|||
$(go.TextBlock, // the "to" label
|
||||
{
|
||||
textAlign: "center",
|
||||
font: "bold 14px sans-serif",
|
||||
stroke: "#1967B3",
|
||||
font: "bold 16px sans-serif",
|
||||
stroke: "#fdb400",
|
||||
segmentIndex: -1,
|
||||
segmentOffset: new go.Point(NaN, NaN),
|
||||
segmentOrientation: go.Link.OrientUpright
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export interface SPTableField {
|
|||
type: string
|
||||
}
|
||||
export interface SPTableAlert {
|
||||
type: "Warning" | "Error",
|
||||
type: "Warning" | "Error" | "Info",
|
||||
title: string,
|
||||
}
|
||||
export interface SPRelation {
|
||||
|
|
@ -31,11 +31,11 @@ export interface SPRelation {
|
|||
fromX: number | "n",
|
||||
toX: number | "m"
|
||||
}
|
||||
const storageKeyPrefix = "reactpnpjsdiagram_sitegraphdata_"
|
||||
const storageKey = "reactpnpjsdiagram_sitegraphdata"
|
||||
const getSPSiteData = async (spfxContext: any, force?: boolean, progress?: (number: number) => void) : Promise<SPSiteData> => {
|
||||
|
||||
// return from cache
|
||||
let spSiteDataFromCache = JSON.parse(localStorage.getItem(storageKeyPrefix));
|
||||
let spSiteDataFromCache = JSON.parse(localStorage.getItem(storageKey));
|
||||
if (spSiteDataFromCache && !force) {
|
||||
progress(100);
|
||||
return spSiteDataFromCache;
|
||||
|
|
@ -66,7 +66,7 @@ const getSPSiteData = async (spfxContext: any, force?: boolean, progress?: (numb
|
|||
let table: SPTable = { title: list.Title, fields: [], alerts: [] };
|
||||
// Fields
|
||||
let fields = (await sp.web.lists.getById(list.Id).fields.filter("Hidden ne 1")())
|
||||
.filter(f => !f.Hidden).sort((a,b) => a.InternalName.charCodeAt(0) - b.InternalName.charCodeAt(0) );
|
||||
.filter(f => !f.Hidden).sort((a,b) => a.TypeDisplayName.charCodeAt(0) - b.TypeDisplayName.charCodeAt(0) );
|
||||
table.fields = fields.map(f => {
|
||||
return {
|
||||
name: f.InternalName,
|
||||
|
|
@ -75,6 +75,12 @@ const getSPSiteData = async (spfxContext: any, force?: boolean, progress?: (numb
|
|||
type: f.TypeDisplayName
|
||||
}
|
||||
});
|
||||
|
||||
// Table Alerts
|
||||
!list.EnableVersioning && table.alerts.push({ title: "no versioning activated", type: "Error" });
|
||||
list.MajorVersionLimit && list.MajorVersionLimit > 100 && table.alerts.push({ title: `high max. version limit (${list.MajorVersionLimit})`, type: "Warning" });
|
||||
table.alerts.push({ title: `Crawling is ${list.NoCrawl ? 'inactive' : 'active'}`, type:"Info" })
|
||||
|
||||
// add Table
|
||||
spSiteData.tables.push(table);
|
||||
|
||||
|
|
@ -98,9 +104,7 @@ const getSPSiteData = async (spfxContext: any, force?: boolean, progress?: (numb
|
|||
// resolve Ids
|
||||
spSiteData.relations = spSiteData.relations.map<SPRelation>((r) => {return {...r, toTableTitle: tmp_listNames[r.toTableTitle]}})
|
||||
|
||||
console.log("SPSiteData", spSiteData);
|
||||
|
||||
localStorage.setItem(storageKeyPrefix, JSON.stringify(spSiteData));
|
||||
localStorage.setItem(storageKey, JSON.stringify(spSiteData));
|
||||
|
||||
return spSiteData
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,30 +1,55 @@
|
|||
import { List } from "@pnp/sp/lists";
|
||||
import { SPSiteData, SPTableField } from "./SPSiteData";
|
||||
import { SPSiteData, SPTableAlert, SPTableField } from "./SPSiteData";
|
||||
|
||||
|
||||
const colors = {
|
||||
'red': '#be4b15',
|
||||
'green': '#52ce60',
|
||||
'blue': '#6ea5f8',
|
||||
'blue': '#186ddf',
|
||||
'lightred': '#fd8852',
|
||||
'lightblue': '#afd4fe',
|
||||
'lightgreen': '#b9e986',
|
||||
'pink': '#faadc1',
|
||||
'purple': '#d689ff',
|
||||
'orange': '#fdb400',
|
||||
'pink': '#f31eaf',
|
||||
'purple': '#881798',
|
||||
'orange': '#fddb01',
|
||||
'keycolor': '#fdb400',
|
||||
}
|
||||
const colorByType: any = {
|
||||
'Lookup': colors.orange
|
||||
const configByFieldType: any = {
|
||||
'default': { color: colors.purple, figure: "Ellipse" },
|
||||
'Lookup': { color: colors.orange, figure: "TriangleRight" },
|
||||
'Counter': { color: colors.keycolor, figure: "Diamond" },
|
||||
"Attachments": { color: colors.blue, figure: "Rectangle" },
|
||||
"Person or Group": { color: colors.green, figure: "RoundedRectangle" },
|
||||
"Single line of text": { color: colors.blue, figure: "Circle" },
|
||||
"Multiple lines of text": { color: colors.blue, figure: "Circle" },
|
||||
"Computed": { color: colors.blue, figure: "Ellipse" },
|
||||
"Date and Time": { color: colors.pink, figure: "Ellipse" },
|
||||
"Choice": { color: colors.blue, figure: "Ellipse" },
|
||||
"Hyperlink or Picture": { color: colors.blue, figure: "Ellipse" }
|
||||
}
|
||||
|
||||
const getNodeFromField = (f: SPTableField) => {
|
||||
let isLookup = (f as any).TypeDisplayName == "Lookup" && (f as any).IsRelationship;
|
||||
return {
|
||||
name: f.name,
|
||||
iskey: false,
|
||||
figure: "Decision",
|
||||
color: isLookup ? colors.orange : colors.purple
|
||||
};
|
||||
let c = configByFieldType[f.type] || configByFieldType['default'];
|
||||
let prefix = f.type == "Counter" ? "PK | " : (f.iskey && f.type == "Lookup" ? "FK | " : "");
|
||||
return {
|
||||
name: prefix + f.name + ` (${f.type})`,
|
||||
iskey: f.iskey,
|
||||
figure: c.figure,
|
||||
color: f.iskey ? colors.keycolor : c.color
|
||||
};
|
||||
}
|
||||
const configByAlert: any = {
|
||||
'Info': { color: colors.lightblue, figure: "LineRight" },
|
||||
'Warning': { color: colors.orange, figure: "LineRight" },
|
||||
'Error': { color: colors.red, figure: "LineRight" },
|
||||
}
|
||||
const getNodeFromAlert = (a: SPTableAlert) => {
|
||||
let c = configByAlert[a.type];
|
||||
return {
|
||||
name: "#" + a.type + " | " + a.title,
|
||||
iskey: false,
|
||||
figure: c.figure,
|
||||
color: c.color
|
||||
};
|
||||
}
|
||||
|
||||
const getGoJSNodesFromSPSiteData = (spSiteData: SPSiteData) : { nodeDataArray: [], linkDataArray: [] } => {
|
||||
|
|
@ -34,7 +59,10 @@ const getGoJSNodesFromSPSiteData = (spSiteData: SPSiteData) : { nodeDataArray: [
|
|||
|
||||
nodeDataArray = spSiteData.tables.map(t => { return {
|
||||
key: t.title,
|
||||
items: t.fields.map(f => getNodeFromField(f))
|
||||
items: [
|
||||
...t.alerts.map(a => getNodeFromAlert(a)),
|
||||
...t.fields.map(f => getNodeFromField(f))
|
||||
]
|
||||
}})
|
||||
|
||||
linkDataArray = spSiteData.relations.map(r => { return {
|
||||
|
|
|
|||
Loading…
Reference in New Issue