@dpuse/dpuse-tool-d3-visualiser 0.0.45 → 0.0.46
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/dpuse-tool-d3-visualiser.es.js +6 -6
- package/dist/dpuse-tool-d3-visualiser.es.js.map +1 -1
- package/dist/{tanStackCharts-DCMs4Y_D.js → tanStackCharts-DNzjtkwh.js} +11 -25
- package/dist/{tanStackCharts-DCMs4Y_D.js.map → tanStackCharts-DNzjtkwh.js.map} +1 -1
- package/dist/types/src/index.d.ts +1 -2
- package/dist/types/src/tanStackCharts.d.ts +1 -2
- package/package.json +2 -3
|
@@ -29,13 +29,13 @@ var e = class {
|
|
|
29
29
|
vendorId: "d3"
|
|
30
30
|
};
|
|
31
31
|
}
|
|
32
|
-
async renderTanStackCharts(e, t, n
|
|
33
|
-
let { renderTanStackCharts:
|
|
34
|
-
return
|
|
35
|
-
destroy:
|
|
36
|
-
resize:
|
|
32
|
+
async renderTanStackCharts(e, t, n) {
|
|
33
|
+
let { renderTanStackCharts: r } = await import("./tanStackCharts-DNzjtkwh.js"), i = r(e, t);
|
|
34
|
+
return n?.(), {
|
|
35
|
+
destroy: i.destroy,
|
|
36
|
+
resize: i.resize,
|
|
37
37
|
get svg() {
|
|
38
|
-
return
|
|
38
|
+
return i.svg;
|
|
39
39
|
},
|
|
40
40
|
vendorId: "tanstack-charts"
|
|
41
41
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dpuse-tool-d3-visualiser.es.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["// TODO: See https://d3-graph-gallery.com/index.html.\n\n// ── External Dependencies & Registrations\nimport type { Chart } from 'billboard.js';\n\n// ── DPUse Framework\nimport type { PresentationView } from '@dpuse/dpuse-shared/component/presentation';\
|
|
1
|
+
{"version":3,"file":"dpuse-tool-d3-visualiser.es.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["// TODO: See https://d3-graph-gallery.com/index.html.\n\n// ── External Dependencies & Registrations\nimport type { Chart } from 'billboard.js';\n\n// ── DPUse Framework\nimport type { PresentationView } from '@dpuse/dpuse-shared/component/presentation';\n\n// ── Local Framework\nimport type { BarChartData } from '@/billboardJs';\nimport type { ObservablePlotChartTypeId } from '@/observablePlot';\nimport type { ChordDiagramData, ChordDiagramOptions } from '@/chordDiagram';\nimport type { ErdDiagramData, ErdDiagramOptions } from '@/erdDiagram';\nimport type { NetworkDiagramData, NetworkDiagramOptions } from '@/networkDiagram';\nimport type { SankeyDiagramData, SankeyDiagramOptions } from '@/sankeyDiagram';\nimport type { TreeDiagramNode, TreeDiagramOptions } from '@/treeDiagram';\n\n// ── Types ────────────────────────────────────────────────────────────────────────────────────────────────────────────\n\nexport type { BarChartData, BarChartSeries } from '@/billboardJs';\nexport type { ChordDiagramData, ChordDiagramLink, ChordDiagramNode, ChordDiagramOptions } from '@/chordDiagram';\nexport type { ErdDiagramData, ErdDiagramEdge, ErdDiagramNode, ErdDiagramNodeTypeId, ErdDiagramOptions } from '@/erdDiagram';\nexport type { NetworkDiagramData, NetworkDiagramLink, NetworkDiagramNode, NetworkDiagramOptions } from '@/networkDiagram';\nexport type { ObservablePlotChartTypeId } from '@/observablePlot';\nexport type { SankeyDiagramData, SankeyDiagramLink, SankeyDiagramNode, SankeyDiagramOptions } from '@/sankeyDiagram';\nexport type { TreeDiagramNode, TreeDiagramNodeRoleId, TreeDiagramOptions } from '@/treeDiagram';\n\nexport interface D3View extends PresentationView {\n svg: SVGSVGElement;\n}\n\nexport interface D3NetworkView extends D3View {\n destroy: () => void;\n triggerAutoLayout: () => void;\n}\n\nexport interface D3BarChartView extends PresentationView {\n chart: Chart;\n destroy: () => void;\n}\n\nexport interface D3TanStackChartsView extends D3View {\n destroy: () => void;\n}\n\n// ── Constants ────────────────────────────────────────────────────────────────────────────────────────────────────────\n\nconst D3_ID = 'd3';\n\n// ── Tools ────────────────────────────────────────────────────────────────────────────────────────────────────────────\n\nexport class D3Tool {\n // Actions - Render chart (Billboard.js, SVG only - see the `billboard.js/canvas` entry point for canvas rendering, unused here).\n async renderBillboardJS(data: BarChartData, renderTo: HTMLElement, callback?: () => void): Promise<D3BarChartView> {\n const { renderBillboardJS } = await import('@/billboardJs');\n const handle = renderBillboardJS(data, renderTo);\n callback?.();\n return {\n chart: handle.chart,\n destroy: handle.destroy,\n resize: handle.resize,\n vendorId: 'billboard.js'\n };\n }\n\n // Actions - Render Observable Plot visualisation.\n async renderObservablePlot(typeId: ObservablePlotChartTypeId, data: BarChartData, renderTo: HTMLElement, callback?: () => void): Promise<D3View> {\n const { renderObservablePlot } = await import('@/observablePlot');\n const handle = renderObservablePlot(typeId, data, renderTo);\n callback?.();\n return {\n resize: handle.resize,\n get svg() {\n return handle.svg;\n },\n vendorId: 'observable-plot'\n };\n }\n\n // Actions - Render bar chart using raw D3 primitives (d3-scale, d3-axis - no chart wrapper library).\n async renderD3BarChart(data: BarChartData, renderTo: HTMLElement, callback?: () => void): Promise<D3View> {\n const { renderD3BarChart } = await import('@/d3BarChart');\n const handle = renderD3BarChart(data, renderTo);\n callback?.();\n return {\n resize: handle.resize,\n get svg() {\n return handle.svg;\n },\n vendorId: D3_ID\n };\n }\n\n // Actions - Render bar chart using TanStack Charts (pre-alpha as of 0.6.4 - its vanilla-DOM mountChart() API is undocumented and may change).\n async renderTanStackCharts(data: BarChartData, renderTo: HTMLElement, callback?: () => void): Promise<D3TanStackChartsView> {\n const { renderTanStackCharts } = await import('@/tanStackCharts');\n const handle = renderTanStackCharts(data, renderTo);\n callback?.();\n return {\n destroy: handle.destroy,\n resize: handle.resize,\n get svg() {\n return handle.svg;\n },\n vendorId: 'tanstack-charts'\n };\n }\n\n // Actions - Render chord diagram (Unovis).\n async renderChordDiagram(data: ChordDiagramData, renderTo: HTMLElement, options?: ChordDiagramOptions, callback?: () => void): Promise<D3View> {\n const { renderChordDiagram } = await import('@/chordDiagram');\n const handle = renderChordDiagram(data, renderTo, options);\n callback?.();\n return {\n resize: handle.resize,\n get svg() {\n return handle.svg;\n },\n vendorId: 'unovis'\n };\n }\n\n // Actions - Render ERD diagram.\n async renderErdDiagram(data: ErdDiagramData, renderTo: HTMLElement, options?: ErdDiagramOptions, callback?: () => void): Promise<D3View> {\n const { renderErdDiagram } = await import('@/erdDiagram');\n const handle = renderErdDiagram(data, renderTo, options);\n callback?.();\n return {\n resize: handle.resize,\n get svg() {\n return handle.svg;\n },\n vendorId: D3_ID\n };\n }\n\n // Actions - Render network diagram.\n async renderNetworkDiagram(data: NetworkDiagramData, renderTo: HTMLElement, options?: NetworkDiagramOptions, callback?: () => void): Promise<D3NetworkView> {\n const { renderNetworkDiagram } = await import('@/networkDiagram');\n const handle = renderNetworkDiagram(data, renderTo, options);\n callback?.();\n return {\n destroy: handle.destroy,\n resize: handle.resize,\n get svg() {\n return handle.svg;\n },\n triggerAutoLayout: handle.triggerAutoLayout,\n vendorId: D3_ID\n };\n }\n\n // Actions - Render Sankey diagram.\n async renderSankeyDiagram(data: SankeyDiagramData, renderTo: HTMLElement, options?: SankeyDiagramOptions, callback?: () => void): Promise<D3View> {\n const { renderSankeyDiagram } = await import('@/sankeyDiagram');\n const handle = renderSankeyDiagram(data, renderTo, options);\n callback?.();\n return {\n resize: handle.resize,\n get svg() {\n return handle.svg;\n },\n vendorId: D3_ID\n };\n }\n\n // Actions - Render tree diagram.\n async renderTreeDiagram(data: TreeDiagramNode, renderTo: HTMLElement, options?: TreeDiagramOptions, callback?: () => void): Promise<D3View> {\n const { renderTreeDiagram } = await import('@/treeDiagram');\n const handle = renderTreeDiagram(data, renderTo, options);\n callback?.();\n return {\n resize: handle.resize,\n get svg() {\n return handle.svg;\n },\n vendorId: D3_ID\n };\n }\n}\n"],"mappings":";AA+CA,IAIa,IAAb,MAAoB;CAEhB,MAAM,kBAAkB,GAAoB,GAAuB,GAAgD;EAC/G,IAAM,EAAE,yBAAsB,MAAM,OAAO,8BACrC,IAAS,EAAkB,GAAM,CAAQ;EAE/C,OADA,IAAW,GACJ;GACH,OAAO,EAAO;GACd,SAAS,EAAO;GAChB,QAAQ,EAAO;GACf,UAAU;EACd;CACJ;CAGA,MAAM,qBAAqB,GAAmC,GAAoB,GAAuB,GAAwC;EAC7I,IAAM,EAAE,4BAAyB,MAAM,OAAO,iCACxC,IAAS,EAAqB,GAAQ,GAAM,CAAQ;EAE1D,OADA,IAAW,GACJ;GACH,QAAQ,EAAO;GACf,IAAI,MAAM;IACN,OAAO,EAAO;GAClB;GACA,UAAU;EACd;CACJ;CAGA,MAAM,iBAAiB,GAAoB,GAAuB,GAAwC;EACtG,IAAM,EAAE,wBAAqB,MAAM,OAAO,6BACpC,IAAS,EAAiB,GAAM,CAAQ;EAE9C,OADA,IAAW,GACJ;GACH,QAAQ,EAAO;GACf,IAAI,MAAM;IACN,OAAO,EAAO;GAClB;GACA,UAAU;EACd;CACJ;CAGA,MAAM,qBAAqB,GAAoB,GAAuB,GAAsD;EACxH,IAAM,EAAE,4BAAyB,MAAM,OAAO,iCACxC,IAAS,EAAqB,GAAM,CAAQ;EAElD,OADA,IAAW,GACJ;GACH,SAAS,EAAO;GAChB,QAAQ,EAAO;GACf,IAAI,MAAM;IACN,OAAO,EAAO;GAClB;GACA,UAAU;EACd;CACJ;CAGA,MAAM,mBAAmB,GAAwB,GAAuB,GAA+B,GAAwC;EAC3I,IAAM,EAAE,0BAAuB,MAAM,OAAO,+BACtC,IAAS,EAAmB,GAAM,GAAU,CAAO;EAEzD,OADA,IAAW,GACJ;GACH,QAAQ,EAAO;GACf,IAAI,MAAM;IACN,OAAO,EAAO;GAClB;GACA,UAAU;EACd;CACJ;CAGA,MAAM,iBAAiB,GAAsB,GAAuB,GAA6B,GAAwC;EACrI,IAAM,EAAE,wBAAqB,MAAM,OAAO,6BACpC,IAAS,EAAiB,GAAM,GAAU,CAAO;EAEvD,OADA,IAAW,GACJ;GACH,QAAQ,EAAO;GACf,IAAI,MAAM;IACN,OAAO,EAAO;GAClB;GACA,UAAU;EACd;CACJ;CAGA,MAAM,qBAAqB,GAA0B,GAAuB,GAAiC,GAA+C;EACxJ,IAAM,EAAE,4BAAyB,MAAM,OAAO,iCACxC,IAAS,EAAqB,GAAM,GAAU,CAAO;EAE3D,OADA,IAAW,GACJ;GACH,SAAS,EAAO;GAChB,QAAQ,EAAO;GACf,IAAI,MAAM;IACN,OAAO,EAAO;GAClB;GACA,mBAAmB,EAAO;GAC1B,UAAU;EACd;CACJ;CAGA,MAAM,oBAAoB,GAAyB,GAAuB,GAAgC,GAAwC;EAC9I,IAAM,EAAE,2BAAwB,MAAM,OAAO,gCACvC,IAAS,EAAoB,GAAM,GAAU,CAAO;EAE1D,OADA,IAAW,GACJ;GACH,QAAQ,EAAO;GACf,IAAI,MAAM;IACN,OAAO,EAAO;GAClB;GACA,UAAU;EACd;CACJ;CAGA,MAAM,kBAAkB,GAAuB,GAAuB,GAA8B,GAAwC;EACxI,IAAM,EAAE,yBAAsB,MAAM,OAAO,8BACrC,IAAS,EAAkB,GAAM,GAAU,CAAO;EAExD,OADA,IAAW,GACJ;GACH,QAAQ,EAAO;GACf,IAAI,MAAM;IACN,OAAO,EAAO;GAClB;GACA,UAAU;EACd;CACJ;AACJ"}
|
|
@@ -3410,13 +3410,11 @@ function _i(e, t, n) {
|
|
|
3410
3410
|
}
|
|
3411
3411
|
//#endregion
|
|
3412
3412
|
//#region src/tanStackCharts.ts
|
|
3413
|
-
|
|
3414
|
-
|
|
3415
|
-
bi(i);
|
|
3416
|
-
let a = {
|
|
3413
|
+
function vi(n, r) {
|
|
3414
|
+
let i = {
|
|
3417
3415
|
ariaLabel: "Bar chart",
|
|
3418
3416
|
definition: lt({
|
|
3419
|
-
marks: [fi(
|
|
3417
|
+
marks: [fi(yi(n), {
|
|
3420
3418
|
color: "seriesName",
|
|
3421
3419
|
fill: "seriesName",
|
|
3422
3420
|
layout: _(),
|
|
@@ -3431,37 +3429,25 @@ function yi(n, r, i) {
|
|
|
3431
3429
|
scale: e
|
|
3432
3430
|
}
|
|
3433
3431
|
})
|
|
3434
|
-
},
|
|
3435
|
-
function
|
|
3432
|
+
}, a = di(r, i);
|
|
3433
|
+
function o() {
|
|
3436
3434
|
let e = r.querySelector("svg");
|
|
3437
3435
|
if (e == null) throw Error("Failed to create TanStack Charts SVG element.");
|
|
3438
3436
|
return e;
|
|
3439
3437
|
}
|
|
3440
3438
|
return {
|
|
3441
3439
|
destroy: () => {
|
|
3442
|
-
|
|
3440
|
+
a.destroy();
|
|
3443
3441
|
},
|
|
3444
3442
|
resize: () => {
|
|
3445
|
-
|
|
3443
|
+
a.update(i);
|
|
3446
3444
|
},
|
|
3447
3445
|
get svg() {
|
|
3448
|
-
return
|
|
3446
|
+
return o();
|
|
3449
3447
|
}
|
|
3450
3448
|
};
|
|
3451
3449
|
}
|
|
3452
|
-
function
|
|
3453
|
-
if (vi.sanitizeHTML = e, vi.patched) return;
|
|
3454
|
-
vi.patched = !0;
|
|
3455
|
-
let t = Object.getOwnPropertyDescriptor(Element.prototype, "innerHTML"), n = t?.set;
|
|
3456
|
-
n != null && Object.defineProperty(HTMLTemplateElement.prototype, "innerHTML", {
|
|
3457
|
-
...t,
|
|
3458
|
-
set(e) {
|
|
3459
|
-
let t = vi.sanitizeHTML ?? ((e) => e);
|
|
3460
|
-
n.call(this, t(e));
|
|
3461
|
-
}
|
|
3462
|
-
});
|
|
3463
|
-
}
|
|
3464
|
-
function xi(e) {
|
|
3450
|
+
function yi(e) {
|
|
3465
3451
|
let t = [];
|
|
3466
3452
|
for (let n of e.series) for (let [r, i] of e.categories.entries()) t.push({
|
|
3467
3453
|
category: i,
|
|
@@ -3471,6 +3457,6 @@ function xi(e) {
|
|
|
3471
3457
|
return t;
|
|
3472
3458
|
}
|
|
3473
3459
|
//#endregion
|
|
3474
|
-
export {
|
|
3460
|
+
export { vi as renderTanStackCharts };
|
|
3475
3461
|
|
|
3476
|
-
//# sourceMappingURL=tanStackCharts-
|
|
3462
|
+
//# sourceMappingURL=tanStackCharts-DNzjtkwh.js.map
|