35 lines
2.0 KiB
TypeScript
35 lines
2.0 KiB
TypeScript
// Isolated consumer fixture; no Storybook registration or production controls.
|
|
import { createRoot } from 'react-dom/client';
|
|
import { OrgChart } from '@hm-design/org-chart-react';
|
|
import { createOrgChart, JsonOrgChartDataSource } from '@hm-design/org-chart';
|
|
import coreUrl from '@hm-design/org-chart/style.css?url';
|
|
import engineUrl from '@hm-design/org-chart/engine.css?url';
|
|
import externalThemeUrl from './external-theme.css?url';
|
|
import hostThemeUrl from './host-theme.css?url';
|
|
import groupThemeUrl from './external-group-theme.css?url';
|
|
import autoData from '../org-chart/data-expanded-small.json';
|
|
import allCompanies from '../org-chart/data-expanded-large.json';
|
|
import fixedData from '../org-chart/data-p1.json';
|
|
|
|
const query = new URLSearchParams(location.search);
|
|
const mode = query.get('mode') ?? 'auto';
|
|
const data = structuredClone(mode === 'auto' ? query.has('all') ? allCompanies : autoData : fixedData);
|
|
if (mode === 'auto' && query.has('statuses')) {
|
|
data.employees.filter(employee => !data.organizations.some(org => org.leaderId === employee.id)).slice(0, 2).forEach((employee, index) => { employee.workStatus = index ? 'onLeave' : 'dispatched'; });
|
|
}
|
|
const options = {
|
|
dataSource: new JsonOrgChartDataSource(data),
|
|
dragDropEnabled: query.has('drag'),
|
|
stylesheetUrls: { core: query.has('groups') ? groupThemeUrl : query.has('theme') ? externalThemeUrl : coreUrl, engine: engineUrl },
|
|
...(mode === 'auto' ? { layoutMode: 'auto' as const, presentationMode: 'chart-only' as const, initialView: 'fit' as const, wheelZoom: 'direct' as const } : { displayMode: mode === 'fixed' ? 'readOnly' as const : 'interactive' as const }),
|
|
};
|
|
document.body.style.margin = '0';
|
|
Object.assign(window, { p11HostThemeUrl: hostThemeUrl });
|
|
const container = document.getElementById('root')!;
|
|
container.style.height = '850px';
|
|
if (query.get('runtime') === 'vanilla') {
|
|
const chart = createOrgChart({ container, ...options });
|
|
void chart.mount();
|
|
Object.assign(window, { p11Chart: chart });
|
|
} else createRoot(container).render(<OrgChart {...options} />);
|