animot-presenter 0.5.12 → 0.5.13
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/AnimotPresenter.svelte +27 -2
- package/dist/cdn/animot-presenter.css +1 -1
- package/dist/cdn/animot-presenter.esm.js +5287 -5064
- package/dist/cdn/animot-presenter.min.js +9 -9
- package/dist/renderers/ChartRenderer.svelte +254 -232
- package/dist/renderers/ChartRenderer.svelte.d.ts +3 -0
- package/dist/types.d.ts +24 -0
- package/dist/utils/chart.d.ts +15 -0
- package/dist/utils/chart.js +94 -0
- package/package.json +84 -84
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Chart helpers — series normalization, color resolution, value formatting.
|
|
3
|
+
* Mirrors the editor app's helper, minus the brand-kit palette path (the
|
|
4
|
+
* presenter is kit-agnostic; `useKitPalette: true` simply falls through to
|
|
5
|
+
* `element.colors`).
|
|
6
|
+
*/
|
|
7
|
+
import type { ChartElement, ChartSeries, ChartDataPoint, ChartValueFormat } from '../types';
|
|
8
|
+
export declare function normalizeSeries(element: ChartElement): ChartSeries[];
|
|
9
|
+
export declare function paletteFor(element: ChartElement): string[];
|
|
10
|
+
export declare function resolveColor(element: ChartElement, seriesIndex: number, pointIndex: number, point: ChartDataPoint | undefined, series: ChartSeries | undefined): string;
|
|
11
|
+
export declare function formatValue(value: number, fmt?: ChartValueFormat): string;
|
|
12
|
+
export declare function computeYRange(element: ChartElement): {
|
|
13
|
+
min: number;
|
|
14
|
+
max: number;
|
|
15
|
+
};
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Chart helpers — series normalization, color resolution, value formatting.
|
|
3
|
+
* Mirrors the editor app's helper, minus the brand-kit palette path (the
|
|
4
|
+
* presenter is kit-agnostic; `useKitPalette: true` simply falls through to
|
|
5
|
+
* `element.colors`).
|
|
6
|
+
*/
|
|
7
|
+
export function normalizeSeries(element) {
|
|
8
|
+
if (element.series && element.series.length > 0)
|
|
9
|
+
return element.series;
|
|
10
|
+
return [{ id: 'default', name: '', data: element.data ?? [] }];
|
|
11
|
+
}
|
|
12
|
+
export function paletteFor(element) {
|
|
13
|
+
return element.colors && element.colors.length > 0 ? element.colors : ['#6366f1'];
|
|
14
|
+
}
|
|
15
|
+
export function resolveColor(element, seriesIndex, pointIndex, point, series) {
|
|
16
|
+
if (point?.color)
|
|
17
|
+
return point.color;
|
|
18
|
+
if (series?.color)
|
|
19
|
+
return series.color;
|
|
20
|
+
const palette = paletteFor(element);
|
|
21
|
+
const seriesCount = element.series?.length ?? 0;
|
|
22
|
+
const idx = seriesCount > 1 ? seriesIndex : pointIndex;
|
|
23
|
+
return palette[idx % palette.length];
|
|
24
|
+
}
|
|
25
|
+
export function formatValue(value, fmt) {
|
|
26
|
+
const { prefix = '', suffix = '', decimals = 0, abbreviate = false } = fmt ?? {};
|
|
27
|
+
let n = value;
|
|
28
|
+
let suffixOverride = '';
|
|
29
|
+
if (abbreviate) {
|
|
30
|
+
const abs = Math.abs(n);
|
|
31
|
+
if (abs >= 1_000_000_000) {
|
|
32
|
+
n = n / 1_000_000_000;
|
|
33
|
+
suffixOverride = 'B';
|
|
34
|
+
}
|
|
35
|
+
else if (abs >= 1_000_000) {
|
|
36
|
+
n = n / 1_000_000;
|
|
37
|
+
suffixOverride = 'M';
|
|
38
|
+
}
|
|
39
|
+
else if (abs >= 1_000) {
|
|
40
|
+
n = n / 1_000;
|
|
41
|
+
suffixOverride = 'K';
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
const rounded = decimals > 0 ? n.toFixed(decimals) : Math.round(n).toString();
|
|
45
|
+
return `${prefix}${rounded}${suffixOverride}${suffix}`;
|
|
46
|
+
}
|
|
47
|
+
export function computeYRange(element) {
|
|
48
|
+
const series = normalizeSeries(element);
|
|
49
|
+
let min = Infinity;
|
|
50
|
+
let max = -Infinity;
|
|
51
|
+
if (element.chartType === 'bar' && (element.barLayout ?? 'grouped') === 'stacked' && series.length > 1) {
|
|
52
|
+
const labels = series[0].data.map((d) => d.label);
|
|
53
|
+
for (let i = 0; i < labels.length; i++) {
|
|
54
|
+
let posSum = 0;
|
|
55
|
+
let negSum = 0;
|
|
56
|
+
for (const s of series) {
|
|
57
|
+
const v = s.data[i]?.value ?? 0;
|
|
58
|
+
if (v >= 0)
|
|
59
|
+
posSum += v;
|
|
60
|
+
else
|
|
61
|
+
negSum += v;
|
|
62
|
+
}
|
|
63
|
+
if (posSum > max)
|
|
64
|
+
max = posSum;
|
|
65
|
+
if (negSum < min)
|
|
66
|
+
min = negSum;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
else {
|
|
70
|
+
for (const s of series) {
|
|
71
|
+
for (const p of s.data) {
|
|
72
|
+
if (p.value < min)
|
|
73
|
+
min = p.value;
|
|
74
|
+
if (p.value > max)
|
|
75
|
+
max = p.value;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
if (!isFinite(min))
|
|
80
|
+
min = 0;
|
|
81
|
+
if (!isFinite(max))
|
|
82
|
+
max = 1;
|
|
83
|
+
if (min > 0)
|
|
84
|
+
min = 0;
|
|
85
|
+
const userMin = element.yAxis?.min;
|
|
86
|
+
const userMax = element.yAxis?.max;
|
|
87
|
+
if (userMin !== undefined)
|
|
88
|
+
min = userMin;
|
|
89
|
+
if (userMax !== undefined)
|
|
90
|
+
max = userMax;
|
|
91
|
+
if (max === min)
|
|
92
|
+
max = min + 1;
|
|
93
|
+
return { min, max };
|
|
94
|
+
}
|
package/package.json
CHANGED
|
@@ -1,84 +1,84 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "animot-presenter",
|
|
3
|
-
"version": "0.5.
|
|
4
|
-
"description": "Embed animated presentations anywhere. Works with vanilla JS, React, Vue, Angular, Svelte, and any frontend framework. Morphing animations, code highlighting, charts, particles, and more.",
|
|
5
|
-
"type": "module",
|
|
6
|
-
"svelte": "./dist/index.js",
|
|
7
|
-
"types": "./dist/index.d.ts",
|
|
8
|
-
"exports": {
|
|
9
|
-
".": {
|
|
10
|
-
"svelte": "./dist/index.js",
|
|
11
|
-
"types": "./dist/index.d.ts",
|
|
12
|
-
"default": "./dist/index.js"
|
|
13
|
-
},
|
|
14
|
-
"./element": {
|
|
15
|
-
"import": "./dist/cdn/animot-presenter.esm.js",
|
|
16
|
-
"require": "./dist/cdn/animot-presenter.min.js"
|
|
17
|
-
},
|
|
18
|
-
"./cdn": {
|
|
19
|
-
"import": "./dist/cdn/animot-presenter.esm.js",
|
|
20
|
-
"require": "./dist/cdn/animot-presenter.min.js"
|
|
21
|
-
},
|
|
22
|
-
"./styles": "./dist/styles/presenter.css"
|
|
23
|
-
},
|
|
24
|
-
"files": [
|
|
25
|
-
"dist",
|
|
26
|
-
"!dist/**/*.test.*",
|
|
27
|
-
"!dist/**/*.spec.*"
|
|
28
|
-
],
|
|
29
|
-
"scripts": {
|
|
30
|
-
"dev": "vite dev",
|
|
31
|
-
"build": "npm run build:svelte && npm run build:element",
|
|
32
|
-
"build:svelte": "svelte-kit sync && svelte-package -o dist",
|
|
33
|
-
"build:element": "vite build --config vite.element.config.ts",
|
|
34
|
-
"package": "npm run build",
|
|
35
|
-
"preview": "vite preview",
|
|
36
|
-
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
37
|
-
"prepublishOnly": "npm run build"
|
|
38
|
-
},
|
|
39
|
-
"peerDependencies": {
|
|
40
|
-
"svelte": "^5.0.0"
|
|
41
|
-
},
|
|
42
|
-
"peerDependenciesMeta": {
|
|
43
|
-
"svelte": {
|
|
44
|
-
"optional": true
|
|
45
|
-
}
|
|
46
|
-
},
|
|
47
|
-
"devDependencies": {
|
|
48
|
-
"@sveltejs/adapter-auto": "^3.0.0",
|
|
49
|
-
"@sveltejs/kit": "^2.0.0",
|
|
50
|
-
"@sveltejs/package": "^2.0.0",
|
|
51
|
-
"@sveltejs/vite-plugin-svelte": "^4.0.0",
|
|
52
|
-
"@types/canvas-confetti": "^1.9.0",
|
|
53
|
-
"svelte": "^5.0.0",
|
|
54
|
-
"svelte-check": "^4.0.0",
|
|
55
|
-
"typescript": "^5.0.0",
|
|
56
|
-
"vite": "^5.0.0"
|
|
57
|
-
},
|
|
58
|
-
"dependencies": {
|
|
59
|
-
"@animotion/motion": "^2.0.1",
|
|
60
|
-
"canvas-confetti": "^1.9.4",
|
|
61
|
-
"shiki": "^1.0.0"
|
|
62
|
-
},
|
|
63
|
-
"keywords": [
|
|
64
|
-
"svelte",
|
|
65
|
-
"react",
|
|
66
|
-
"vue",
|
|
67
|
-
"angular",
|
|
68
|
-
"web-component",
|
|
69
|
-
"animation",
|
|
70
|
-
"presentation",
|
|
71
|
-
"slides",
|
|
72
|
-
"morphing",
|
|
73
|
-
"animot",
|
|
74
|
-
"code-animation",
|
|
75
|
-
"typewriter",
|
|
76
|
-
"charts",
|
|
77
|
-
"particles"
|
|
78
|
-
],
|
|
79
|
-
"license": "BUSL-1.1",
|
|
80
|
-
"repository": {
|
|
81
|
-
"type": "git",
|
|
82
|
-
"url": "https://github.com/beeblock/animot-presenter"
|
|
83
|
-
}
|
|
84
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "animot-presenter",
|
|
3
|
+
"version": "0.5.13",
|
|
4
|
+
"description": "Embed animated presentations anywhere. Works with vanilla JS, React, Vue, Angular, Svelte, and any frontend framework. Morphing animations, code highlighting, charts, particles, and more.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"svelte": "./dist/index.js",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"svelte": "./dist/index.js",
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"default": "./dist/index.js"
|
|
13
|
+
},
|
|
14
|
+
"./element": {
|
|
15
|
+
"import": "./dist/cdn/animot-presenter.esm.js",
|
|
16
|
+
"require": "./dist/cdn/animot-presenter.min.js"
|
|
17
|
+
},
|
|
18
|
+
"./cdn": {
|
|
19
|
+
"import": "./dist/cdn/animot-presenter.esm.js",
|
|
20
|
+
"require": "./dist/cdn/animot-presenter.min.js"
|
|
21
|
+
},
|
|
22
|
+
"./styles": "./dist/styles/presenter.css"
|
|
23
|
+
},
|
|
24
|
+
"files": [
|
|
25
|
+
"dist",
|
|
26
|
+
"!dist/**/*.test.*",
|
|
27
|
+
"!dist/**/*.spec.*"
|
|
28
|
+
],
|
|
29
|
+
"scripts": {
|
|
30
|
+
"dev": "vite dev",
|
|
31
|
+
"build": "npm run build:svelte && npm run build:element",
|
|
32
|
+
"build:svelte": "svelte-kit sync && svelte-package -o dist",
|
|
33
|
+
"build:element": "vite build --config vite.element.config.ts",
|
|
34
|
+
"package": "npm run build",
|
|
35
|
+
"preview": "vite preview",
|
|
36
|
+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
37
|
+
"prepublishOnly": "npm run build"
|
|
38
|
+
},
|
|
39
|
+
"peerDependencies": {
|
|
40
|
+
"svelte": "^5.0.0"
|
|
41
|
+
},
|
|
42
|
+
"peerDependenciesMeta": {
|
|
43
|
+
"svelte": {
|
|
44
|
+
"optional": true
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
"devDependencies": {
|
|
48
|
+
"@sveltejs/adapter-auto": "^3.0.0",
|
|
49
|
+
"@sveltejs/kit": "^2.0.0",
|
|
50
|
+
"@sveltejs/package": "^2.0.0",
|
|
51
|
+
"@sveltejs/vite-plugin-svelte": "^4.0.0",
|
|
52
|
+
"@types/canvas-confetti": "^1.9.0",
|
|
53
|
+
"svelte": "^5.0.0",
|
|
54
|
+
"svelte-check": "^4.0.0",
|
|
55
|
+
"typescript": "^5.0.0",
|
|
56
|
+
"vite": "^5.0.0"
|
|
57
|
+
},
|
|
58
|
+
"dependencies": {
|
|
59
|
+
"@animotion/motion": "^2.0.1",
|
|
60
|
+
"canvas-confetti": "^1.9.4",
|
|
61
|
+
"shiki": "^1.0.0"
|
|
62
|
+
},
|
|
63
|
+
"keywords": [
|
|
64
|
+
"svelte",
|
|
65
|
+
"react",
|
|
66
|
+
"vue",
|
|
67
|
+
"angular",
|
|
68
|
+
"web-component",
|
|
69
|
+
"animation",
|
|
70
|
+
"presentation",
|
|
71
|
+
"slides",
|
|
72
|
+
"morphing",
|
|
73
|
+
"animot",
|
|
74
|
+
"code-animation",
|
|
75
|
+
"typewriter",
|
|
76
|
+
"charts",
|
|
77
|
+
"particles"
|
|
78
|
+
],
|
|
79
|
+
"license": "BUSL-1.1",
|
|
80
|
+
"repository": {
|
|
81
|
+
"type": "git",
|
|
82
|
+
"url": "https://github.com/beeblock/animot-presenter"
|
|
83
|
+
}
|
|
84
|
+
}
|