@internetstiftelsen/charts 0.3.0 → 0.3.2
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/base-chart.d.ts +1 -0
- package/base-chart.js +16 -3
- package/package.json +17 -17
package/base-chart.d.ts
CHANGED
|
@@ -21,6 +21,7 @@ export declare abstract class BaseChart {
|
|
|
21
21
|
protected readonly theme: ChartTheme;
|
|
22
22
|
protected readonly scaleConfig: AxisScaleConfig;
|
|
23
23
|
protected width: number;
|
|
24
|
+
protected height: number;
|
|
24
25
|
protected xAxis: XAxis | null;
|
|
25
26
|
protected yAxis: YAxis | null;
|
|
26
27
|
protected grid: Grid | null;
|
package/base-chart.js
CHANGED
|
@@ -31,6 +31,12 @@ export class BaseChart {
|
|
|
31
31
|
writable: true,
|
|
32
32
|
value: void 0
|
|
33
33
|
}); // Current rendering width
|
|
34
|
+
Object.defineProperty(this, "height", {
|
|
35
|
+
enumerable: true,
|
|
36
|
+
configurable: true,
|
|
37
|
+
writable: true,
|
|
38
|
+
value: void 0
|
|
39
|
+
}); // Current rendering height
|
|
34
40
|
Object.defineProperty(this, "xAxis", {
|
|
35
41
|
enumerable: true,
|
|
36
42
|
configurable: true,
|
|
@@ -120,6 +126,7 @@ export class BaseChart {
|
|
|
120
126
|
this.data = config.data;
|
|
121
127
|
this.theme = { ...defaultTheme, ...config.theme };
|
|
122
128
|
this.width = this.theme.width;
|
|
129
|
+
this.height = this.theme.height;
|
|
123
130
|
this.scaleConfig = config.scales || {};
|
|
124
131
|
this.layoutManager = new LayoutManager(this.theme);
|
|
125
132
|
}
|
|
@@ -148,15 +155,21 @@ export class BaseChart {
|
|
|
148
155
|
// Calculate current width
|
|
149
156
|
this.width =
|
|
150
157
|
this.container.getBoundingClientRect().width || this.theme.width;
|
|
158
|
+
this.height =
|
|
159
|
+
this.container.getBoundingClientRect().height || this.theme.height;
|
|
151
160
|
// Clear and setup SVG
|
|
152
161
|
this.container.innerHTML = '';
|
|
153
162
|
this.svg = create('svg')
|
|
154
163
|
.attr('width', '100%')
|
|
155
|
-
.attr('height', this.
|
|
164
|
+
.attr('height', this.height)
|
|
156
165
|
.style('display', 'block');
|
|
157
166
|
this.container.appendChild(this.svg.node());
|
|
158
167
|
// Calculate layout
|
|
159
|
-
const layoutTheme = {
|
|
168
|
+
const layoutTheme = {
|
|
169
|
+
...this.theme,
|
|
170
|
+
width: this.width,
|
|
171
|
+
height: this.height,
|
|
172
|
+
};
|
|
160
173
|
this.layoutManager = new LayoutManager(layoutTheme);
|
|
161
174
|
const components = this.getLayoutComponents();
|
|
162
175
|
this.plotArea = this.layoutManager.calculateLayout(components);
|
|
@@ -267,7 +280,7 @@ export class BaseChart {
|
|
|
267
280
|
const clone = this.svg.node().cloneNode(true);
|
|
268
281
|
clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
|
|
269
282
|
clone.setAttribute('width', String(this.width));
|
|
270
|
-
clone.setAttribute('height', String(this.
|
|
283
|
+
clone.setAttribute('height', String(this.height));
|
|
271
284
|
return clone.outerHTML;
|
|
272
285
|
}
|
|
273
286
|
exportJSON() {
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.3.
|
|
2
|
+
"version": "0.3.2",
|
|
3
3
|
"name": "@internetstiftelsen/charts",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
@@ -31,38 +31,38 @@
|
|
|
31
31
|
"@radix-ui/react-select": "^2.2.6",
|
|
32
32
|
"@radix-ui/react-switch": "^1.2.6",
|
|
33
33
|
"@radix-ui/react-tabs": "^1.1.13",
|
|
34
|
-
"@tailwindcss/vite": "^4.1.16",
|
|
35
34
|
"@types/d3": "^7.4.3",
|
|
36
35
|
"class-variance-authority": "^0.7.1",
|
|
37
36
|
"clsx": "^2.1.1",
|
|
38
37
|
"d3": "^7.9.0",
|
|
39
38
|
"handsontable": "^16.2.0",
|
|
40
39
|
"lucide-react": "^0.548.0",
|
|
41
|
-
"react": "^19.2.
|
|
42
|
-
"react-dom": "^19.2.
|
|
43
|
-
"tailwind-merge": "^3.
|
|
44
|
-
"tailwindcss": "^4.1.
|
|
40
|
+
"react": "^19.2.4",
|
|
41
|
+
"react-dom": "^19.2.4",
|
|
42
|
+
"tailwind-merge": "^3.4.0",
|
|
43
|
+
"tailwindcss": "^4.1.18"
|
|
45
44
|
},
|
|
46
45
|
"devDependencies": {
|
|
47
|
-
"@eslint/js": "^9.
|
|
46
|
+
"@eslint/js": "^9.39.2",
|
|
47
|
+
"@tailwindcss/vite": "^4.1.18",
|
|
48
48
|
"@testing-library/dom": "^10.4.1",
|
|
49
49
|
"@testing-library/jest-dom": "^6.9.1",
|
|
50
50
|
"@testing-library/react": "^16.3.2",
|
|
51
|
-
"@types/node": "^24.9
|
|
52
|
-
"@types/react": "^19.2.
|
|
53
|
-
"@types/react-dom": "^19.2.
|
|
54
|
-
"@vitejs/plugin-react-swc": "^4.2.
|
|
55
|
-
"eslint": "^9.
|
|
51
|
+
"@types/node": "^24.10.9",
|
|
52
|
+
"@types/react": "^19.2.10",
|
|
53
|
+
"@types/react-dom": "^19.2.3",
|
|
54
|
+
"@vitejs/plugin-react-swc": "^4.2.2",
|
|
55
|
+
"eslint": "^9.39.2",
|
|
56
56
|
"eslint-plugin-react-hooks": "^7.0.1",
|
|
57
|
-
"eslint-plugin-react-refresh": "^0.4.
|
|
58
|
-
"globals": "^16.
|
|
57
|
+
"eslint-plugin-react-refresh": "^0.4.26",
|
|
58
|
+
"globals": "^16.5.0",
|
|
59
59
|
"jsdom": "^27.4.0",
|
|
60
60
|
"prettier": "3.6.2",
|
|
61
61
|
"tsc-alias": "^1.8.16",
|
|
62
62
|
"tw-animate-css": "^1.4.0",
|
|
63
63
|
"typescript": "~5.9.3",
|
|
64
|
-
"typescript-eslint": "^8.
|
|
65
|
-
"vite": "^7.1
|
|
66
|
-
"vitest": "^4.0.
|
|
64
|
+
"typescript-eslint": "^8.54.0",
|
|
65
|
+
"vite": "^7.3.1",
|
|
66
|
+
"vitest": "^4.0.18"
|
|
67
67
|
}
|
|
68
68
|
}
|