@ojiepermana/angular-chart 22.0.43 → 22.0.45
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/fesm2022/ojiepermana-angular-chart-area.mjs +21 -14
- package/fesm2022/ojiepermana-angular-chart-bar.mjs +26 -17
- package/fesm2022/ojiepermana-angular-chart-core.mjs +23 -25
- package/fesm2022/ojiepermana-angular-chart-line.mjs +21 -14
- package/fesm2022/ojiepermana-angular-chart-pie.mjs +23 -14
- package/fesm2022/ojiepermana-angular-chart-primitives.mjs +142 -89
- package/fesm2022/ojiepermana-angular-chart-radar.mjs +57 -24
- package/fesm2022/ojiepermana-angular-chart-radial.mjs +23 -14
- package/fesm2022/ojiepermana-angular-chart-scatter.mjs +13 -10
- package/package.json +2 -2
|
@@ -2,7 +2,7 @@ import { curveCardinalClosed, curveLinearClosed, lineRadial } from 'd3-shape';
|
|
|
2
2
|
import { max } from 'd3-array';
|
|
3
3
|
import { seriesColorVar, ChartContext } from '@ojiepermana/angular-chart/core';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
|
-
import { inject, input, computed,
|
|
5
|
+
import { inject, input, computed, Component } from '@angular/core';
|
|
6
6
|
|
|
7
7
|
function computeRadarLayout(input) {
|
|
8
8
|
const { data, axisKey, seriesKeys, innerWidth, innerHeight, levels, curve, grid } = input;
|
|
@@ -145,23 +145,31 @@ class RadarChart {
|
|
|
145
145
|
return `${label} at ${p.axis}: ${p.value}`;
|
|
146
146
|
}
|
|
147
147
|
setActive(event, seriesKey, index) {
|
|
148
|
-
const clientX = event instanceof PointerEvent
|
|
149
|
-
|
|
148
|
+
const clientX = event instanceof PointerEvent
|
|
149
|
+
? event.clientX
|
|
150
|
+
: event.target.getBoundingClientRect().left;
|
|
151
|
+
const clientY = event instanceof PointerEvent
|
|
152
|
+
? event.clientY
|
|
153
|
+
: event.target.getBoundingClientRect().top;
|
|
150
154
|
this.root.activePoint.set({ index, datumIndex: index, seriesKey, clientX, clientY });
|
|
151
155
|
}
|
|
152
156
|
clearActive() {
|
|
153
157
|
this.root.activePoint.set(null);
|
|
154
158
|
}
|
|
155
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
156
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
159
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RadarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
160
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: RadarChart, isStandalone: true, selector: "ChartRadar", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, axisKey: { classPropertyName: "axisKey", publicName: "axisKey", isSignal: true, isRequired: true, transformFunction: null }, styles: { classPropertyName: "styles", publicName: "styles", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, levels: { classPropertyName: "levels", publicName: "levels", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, fillOpacity: { classPropertyName: "fillOpacity", publicName: "fillOpacity", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, dotRadius: { classPropertyName: "dotRadius", publicName: "dotRadius", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, gridFilled: { classPropertyName: "gridFilled", publicName: "gridFilled", isSignal: true, isRequired: false, transformFunction: null }, showAxes: { classPropertyName: "showAxes", publicName: "showAxes", isSignal: true, isRequired: false, transformFunction: null }, linesOnly: { classPropertyName: "linesOnly", publicName: "linesOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-style": "styles()" }, classAttribute: "relative block h-full w-full" }, ngImport: i0, template: `
|
|
157
161
|
<svg:svg
|
|
158
162
|
class="block h-full w-full overflow-visible"
|
|
159
163
|
[attr.viewBox]="viewBox()"
|
|
160
164
|
preserveAspectRatio="xMidYMid meet"
|
|
161
165
|
role="img"
|
|
162
|
-
[attr.aria-label]="ariaSummary()"
|
|
166
|
+
[attr.aria-label]="ariaSummary()"
|
|
167
|
+
>
|
|
163
168
|
<svg:g [attr.transform]="innerTransform()">
|
|
164
|
-
<svg:g
|
|
169
|
+
<svg:g
|
|
170
|
+
class="chart-radar"
|
|
171
|
+
[attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'"
|
|
172
|
+
>
|
|
165
173
|
@if (layout().grid !== 'none') {
|
|
166
174
|
@for (level of layout().levels; track level.value; let levelIndex = $index) {
|
|
167
175
|
@if (layout().grid === 'circle') {
|
|
@@ -172,27 +180,36 @@ class RadarChart {
|
|
|
172
180
|
stroke-dasharray="2 2"
|
|
173
181
|
cx="0"
|
|
174
182
|
cy="0"
|
|
175
|
-
[attr.r]="level.radius"
|
|
183
|
+
[attr.r]="level.radius"
|
|
184
|
+
/>
|
|
176
185
|
} @else {
|
|
177
186
|
<svg:path
|
|
178
187
|
class="chart-radar-level stroke-border"
|
|
179
188
|
[attr.d]="level.path"
|
|
180
189
|
[attr.fill]="gridFill()"
|
|
181
190
|
[attr.fill-opacity]="gridFillOpacity(levelIndex)"
|
|
182
|
-
stroke-dasharray="2 2"
|
|
191
|
+
stroke-dasharray="2 2"
|
|
192
|
+
/>
|
|
183
193
|
}
|
|
184
194
|
}
|
|
185
195
|
}
|
|
186
196
|
@if (showAxes()) {
|
|
187
197
|
@for (axis of layout().axes; track axis.name) {
|
|
188
|
-
<svg:line
|
|
198
|
+
<svg:line
|
|
199
|
+
class="chart-radar-axis stroke-border"
|
|
200
|
+
x1="0"
|
|
201
|
+
y1="0"
|
|
202
|
+
[attr.x2]="axis.x"
|
|
203
|
+
[attr.y2]="axis.y"
|
|
204
|
+
/>
|
|
189
205
|
@if (showLabels()) {
|
|
190
206
|
<svg:text
|
|
191
207
|
class="chart-radar-axis-label fill-muted-foreground text-2xs"
|
|
192
208
|
text-anchor="middle"
|
|
193
209
|
dominant-baseline="middle"
|
|
194
210
|
[attr.x]="axis.x * 1.12"
|
|
195
|
-
[attr.y]="axis.y * 1.12"
|
|
211
|
+
[attr.y]="axis.y * 1.12"
|
|
212
|
+
>
|
|
196
213
|
{{ axis.name }}
|
|
197
214
|
</svg:text>
|
|
198
215
|
}
|
|
@@ -206,7 +223,8 @@ class RadarChart {
|
|
|
206
223
|
[attr.fill]="linesOnly() ? 'none' : s.color"
|
|
207
224
|
[attr.fill-opacity]="linesOnly() ? null : fillOpacity()"
|
|
208
225
|
[attr.stroke-width]="strokeWidth()"
|
|
209
|
-
stroke-linejoin="round"
|
|
226
|
+
stroke-linejoin="round"
|
|
227
|
+
/>
|
|
210
228
|
@if (showDots()) {
|
|
211
229
|
@for (p of s.points; track p.axis; let i = $index) {
|
|
212
230
|
<svg:circle
|
|
@@ -221,7 +239,8 @@ class RadarChart {
|
|
|
221
239
|
(pointermove)="setActive($event, s.seriesKey, i)"
|
|
222
240
|
(pointerleave)="clearActive()"
|
|
223
241
|
(focus)="setActive($event, s.seriesKey, i)"
|
|
224
|
-
(blur)="clearActive()"
|
|
242
|
+
(blur)="clearActive()"
|
|
243
|
+
/>
|
|
225
244
|
}
|
|
226
245
|
}
|
|
227
246
|
}
|
|
@@ -231,13 +250,12 @@ class RadarChart {
|
|
|
231
250
|
</svg:svg>
|
|
232
251
|
<ng-content select="ChartTooltip" />
|
|
233
252
|
<ng-content select="ChartLegend" />
|
|
234
|
-
`, isInline: true
|
|
253
|
+
`, isInline: true });
|
|
235
254
|
}
|
|
236
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
255
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RadarChart, decorators: [{
|
|
237
256
|
type: Component,
|
|
238
257
|
args: [{
|
|
239
258
|
selector: 'ChartRadar',
|
|
240
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
241
259
|
host: { class: 'relative block h-full w-full', '[attr.data-style]': 'styles()' },
|
|
242
260
|
template: `
|
|
243
261
|
<svg:svg
|
|
@@ -245,9 +263,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
245
263
|
[attr.viewBox]="viewBox()"
|
|
246
264
|
preserveAspectRatio="xMidYMid meet"
|
|
247
265
|
role="img"
|
|
248
|
-
[attr.aria-label]="ariaSummary()"
|
|
266
|
+
[attr.aria-label]="ariaSummary()"
|
|
267
|
+
>
|
|
249
268
|
<svg:g [attr.transform]="innerTransform()">
|
|
250
|
-
<svg:g
|
|
269
|
+
<svg:g
|
|
270
|
+
class="chart-radar"
|
|
271
|
+
[attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'"
|
|
272
|
+
>
|
|
251
273
|
@if (layout().grid !== 'none') {
|
|
252
274
|
@for (level of layout().levels; track level.value; let levelIndex = $index) {
|
|
253
275
|
@if (layout().grid === 'circle') {
|
|
@@ -258,27 +280,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
258
280
|
stroke-dasharray="2 2"
|
|
259
281
|
cx="0"
|
|
260
282
|
cy="0"
|
|
261
|
-
[attr.r]="level.radius"
|
|
283
|
+
[attr.r]="level.radius"
|
|
284
|
+
/>
|
|
262
285
|
} @else {
|
|
263
286
|
<svg:path
|
|
264
287
|
class="chart-radar-level stroke-border"
|
|
265
288
|
[attr.d]="level.path"
|
|
266
289
|
[attr.fill]="gridFill()"
|
|
267
290
|
[attr.fill-opacity]="gridFillOpacity(levelIndex)"
|
|
268
|
-
stroke-dasharray="2 2"
|
|
291
|
+
stroke-dasharray="2 2"
|
|
292
|
+
/>
|
|
269
293
|
}
|
|
270
294
|
}
|
|
271
295
|
}
|
|
272
296
|
@if (showAxes()) {
|
|
273
297
|
@for (axis of layout().axes; track axis.name) {
|
|
274
|
-
<svg:line
|
|
298
|
+
<svg:line
|
|
299
|
+
class="chart-radar-axis stroke-border"
|
|
300
|
+
x1="0"
|
|
301
|
+
y1="0"
|
|
302
|
+
[attr.x2]="axis.x"
|
|
303
|
+
[attr.y2]="axis.y"
|
|
304
|
+
/>
|
|
275
305
|
@if (showLabels()) {
|
|
276
306
|
<svg:text
|
|
277
307
|
class="chart-radar-axis-label fill-muted-foreground text-2xs"
|
|
278
308
|
text-anchor="middle"
|
|
279
309
|
dominant-baseline="middle"
|
|
280
310
|
[attr.x]="axis.x * 1.12"
|
|
281
|
-
[attr.y]="axis.y * 1.12"
|
|
311
|
+
[attr.y]="axis.y * 1.12"
|
|
312
|
+
>
|
|
282
313
|
{{ axis.name }}
|
|
283
314
|
</svg:text>
|
|
284
315
|
}
|
|
@@ -292,7 +323,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
292
323
|
[attr.fill]="linesOnly() ? 'none' : s.color"
|
|
293
324
|
[attr.fill-opacity]="linesOnly() ? null : fillOpacity()"
|
|
294
325
|
[attr.stroke-width]="strokeWidth()"
|
|
295
|
-
stroke-linejoin="round"
|
|
326
|
+
stroke-linejoin="round"
|
|
327
|
+
/>
|
|
296
328
|
@if (showDots()) {
|
|
297
329
|
@for (p of s.points; track p.axis; let i = $index) {
|
|
298
330
|
<svg:circle
|
|
@@ -307,7 +339,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
307
339
|
(pointermove)="setActive($event, s.seriesKey, i)"
|
|
308
340
|
(pointerleave)="clearActive()"
|
|
309
341
|
(focus)="setActive($event, s.seriesKey, i)"
|
|
310
|
-
(blur)="clearActive()"
|
|
342
|
+
(blur)="clearActive()"
|
|
343
|
+
/>
|
|
311
344
|
}
|
|
312
345
|
}
|
|
313
346
|
}
|
|
@@ -2,7 +2,7 @@ import { arc } from 'd3-shape';
|
|
|
2
2
|
import { max } from 'd3-array';
|
|
3
3
|
import { seriesColorVar, ChartContext, ChartThemeRadius } from '@ojiepermana/angular-chart/core';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
|
-
import { inject, input, output, computed,
|
|
5
|
+
import { inject, input, output, computed, Component } from '@angular/core';
|
|
6
6
|
|
|
7
7
|
function computeRadialLayout(input) {
|
|
8
8
|
const { data, nameKey, valueKey, innerWidth, innerHeight, seriesKeys, trackPadding, startAngle, endAngle, cornerRadius, } = input;
|
|
@@ -132,8 +132,12 @@ class RadialChart {
|
|
|
132
132
|
});
|
|
133
133
|
}
|
|
134
134
|
setActive(event, b) {
|
|
135
|
-
const clientX = event instanceof PointerEvent
|
|
136
|
-
|
|
135
|
+
const clientX = event instanceof PointerEvent
|
|
136
|
+
? event.clientX
|
|
137
|
+
: event.target.getBoundingClientRect().left;
|
|
138
|
+
const clientY = event instanceof PointerEvent
|
|
139
|
+
? event.clientY
|
|
140
|
+
: event.target.getBoundingClientRect().top;
|
|
137
141
|
this.root.activePoint.set({
|
|
138
142
|
index: b.datumIndex,
|
|
139
143
|
datumIndex: b.datumIndex,
|
|
@@ -145,14 +149,15 @@ class RadialChart {
|
|
|
145
149
|
clearActive() {
|
|
146
150
|
this.root.activePoint.set(null);
|
|
147
151
|
}
|
|
148
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
149
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
152
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RadialChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
153
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: RadialChart, isStandalone: true, selector: "ChartRadial", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, nameKey: { classPropertyName: "nameKey", publicName: "nameKey", isSignal: true, isRequired: true, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: true, transformFunction: null }, seriesKeys: { classPropertyName: "seriesKeys", publicName: "seriesKeys", isSignal: true, isRequired: false, transformFunction: null }, styles: { classPropertyName: "styles", publicName: "styles", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, trackPadding: { classPropertyName: "trackPadding", publicName: "trackPadding", isSignal: true, isRequired: false, transformFunction: null }, cornerRadius: { classPropertyName: "cornerRadius", publicName: "cornerRadius", isSignal: true, isRequired: false, transformFunction: null }, startAngle: { classPropertyName: "startAngle", publicName: "startAngle", isSignal: true, isRequired: false, transformFunction: null }, endAngle: { classPropertyName: "endAngle", publicName: "endAngle", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, showTrack: { classPropertyName: "showTrack", publicName: "showTrack", isSignal: true, isRequired: false, transformFunction: null }, showValueLabels: { classPropertyName: "showValueLabels", publicName: "showValueLabels", isSignal: true, isRequired: false, transformFunction: null }, valueLabelFormat: { classPropertyName: "valueLabelFormat", publicName: "valueLabelFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { barClick: "barClick" }, host: { properties: { "attr.data-style": "styles()" }, classAttribute: "relative block h-full w-full" }, ngImport: i0, template: `
|
|
150
154
|
<svg:svg
|
|
151
155
|
class="block h-full w-full overflow-visible"
|
|
152
156
|
[attr.viewBox]="viewBox()"
|
|
153
157
|
preserveAspectRatio="xMidYMid meet"
|
|
154
158
|
role="img"
|
|
155
|
-
[attr.aria-label]="ariaSummary()"
|
|
159
|
+
[attr.aria-label]="ariaSummary()"
|
|
160
|
+
>
|
|
156
161
|
<svg:g [attr.transform]="innerTransform()">
|
|
157
162
|
<svg:g [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'">
|
|
158
163
|
@for (b of layout().bars; track b.seriesKey) {
|
|
@@ -172,14 +177,16 @@ class RadialChart {
|
|
|
172
177
|
(pointermove)="setActive($event, b)"
|
|
173
178
|
(pointerleave)="clearActive()"
|
|
174
179
|
(focus)="setActive($event, b)"
|
|
175
|
-
(blur)="clearActive()"
|
|
180
|
+
(blur)="clearActive()"
|
|
181
|
+
/>
|
|
176
182
|
@if (showValueLabels()) {
|
|
177
183
|
<svg:text
|
|
178
184
|
class="chart-radial-value pointer-events-none fill-muted-foreground text-2xs"
|
|
179
185
|
[attr.x]="barLabelX(b)"
|
|
180
186
|
[attr.y]="barLabelY(b)"
|
|
181
187
|
[attr.text-anchor]="barLabelAnchor(b)"
|
|
182
|
-
dominant-baseline="middle"
|
|
188
|
+
dominant-baseline="middle"
|
|
189
|
+
>
|
|
183
190
|
{{ formatValueLabel(b) }}
|
|
184
191
|
</svg:text>
|
|
185
192
|
}
|
|
@@ -192,13 +199,12 @@ class RadialChart {
|
|
|
192
199
|
</div>
|
|
193
200
|
<ng-content select="ChartTooltip" />
|
|
194
201
|
<ng-content select="ChartLegend" />
|
|
195
|
-
`, isInline: true
|
|
202
|
+
`, isInline: true });
|
|
196
203
|
}
|
|
197
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
204
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RadialChart, decorators: [{
|
|
198
205
|
type: Component,
|
|
199
206
|
args: [{
|
|
200
207
|
selector: 'ChartRadial',
|
|
201
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
202
208
|
host: { class: 'relative block h-full w-full', '[attr.data-style]': 'styles()' },
|
|
203
209
|
template: `
|
|
204
210
|
<svg:svg
|
|
@@ -206,7 +212,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
206
212
|
[attr.viewBox]="viewBox()"
|
|
207
213
|
preserveAspectRatio="xMidYMid meet"
|
|
208
214
|
role="img"
|
|
209
|
-
[attr.aria-label]="ariaSummary()"
|
|
215
|
+
[attr.aria-label]="ariaSummary()"
|
|
216
|
+
>
|
|
210
217
|
<svg:g [attr.transform]="innerTransform()">
|
|
211
218
|
<svg:g [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'">
|
|
212
219
|
@for (b of layout().bars; track b.seriesKey) {
|
|
@@ -226,14 +233,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
226
233
|
(pointermove)="setActive($event, b)"
|
|
227
234
|
(pointerleave)="clearActive()"
|
|
228
235
|
(focus)="setActive($event, b)"
|
|
229
|
-
(blur)="clearActive()"
|
|
236
|
+
(blur)="clearActive()"
|
|
237
|
+
/>
|
|
230
238
|
@if (showValueLabels()) {
|
|
231
239
|
<svg:text
|
|
232
240
|
class="chart-radial-value pointer-events-none fill-muted-foreground text-2xs"
|
|
233
241
|
[attr.x]="barLabelX(b)"
|
|
234
242
|
[attr.y]="barLabelY(b)"
|
|
235
243
|
[attr.text-anchor]="barLabelAnchor(b)"
|
|
236
|
-
dominant-baseline="middle"
|
|
244
|
+
dominant-baseline="middle"
|
|
245
|
+
>
|
|
237
246
|
{{ formatValueLabel(b) }}
|
|
238
247
|
</svg:text>
|
|
239
248
|
}
|
|
@@ -2,7 +2,7 @@ import { scaleLinear } from 'd3-scale';
|
|
|
2
2
|
import { extent } from 'd3-array';
|
|
3
3
|
import { seriesColorVar, ChartContext, ScatterViewportContext } from '@ojiepermana/angular-chart/core';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
|
-
import { inject, input, output, computed, effect,
|
|
5
|
+
import { inject, input, output, computed, effect, Component } from '@angular/core';
|
|
6
6
|
|
|
7
7
|
function nice(extent) {
|
|
8
8
|
const [lo, hi] = extent;
|
|
@@ -165,14 +165,15 @@ class ScatterChart {
|
|
|
165
165
|
datum: this.data()[p.datumIndex],
|
|
166
166
|
});
|
|
167
167
|
}
|
|
168
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
169
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
168
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ScatterChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
169
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: ScatterChart, isStandalone: true, selector: "ChartScatter", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, xKey: { classPropertyName: "xKey", publicName: "xKey", isSignal: true, isRequired: true, transformFunction: null }, yKey: { classPropertyName: "yKey", publicName: "yKey", isSignal: true, isRequired: true, transformFunction: null }, sizeKey: { classPropertyName: "sizeKey", publicName: "sizeKey", isSignal: true, isRequired: false, transformFunction: null }, seriesKey: { classPropertyName: "seriesKey", publicName: "seriesKey", isSignal: true, isRequired: false, transformFunction: null }, styles: { classPropertyName: "styles", publicName: "styles", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, minPointRadius: { classPropertyName: "minPointRadius", publicName: "minPointRadius", isSignal: true, isRequired: false, transformFunction: null }, maxPointRadius: { classPropertyName: "maxPointRadius", publicName: "maxPointRadius", isSignal: true, isRequired: false, transformFunction: null }, xDomain: { classPropertyName: "xDomain", publicName: "xDomain", isSignal: true, isRequired: false, transformFunction: null }, yDomain: { classPropertyName: "yDomain", publicName: "yDomain", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick" }, host: { properties: { "attr.data-style": "styles()" }, classAttribute: "relative block h-full w-full" }, providers: [ScatterViewportContext], ngImport: i0, template: `
|
|
170
170
|
<svg:svg
|
|
171
171
|
class="block h-full w-full overflow-visible"
|
|
172
172
|
[attr.viewBox]="viewBox()"
|
|
173
173
|
preserveAspectRatio="none"
|
|
174
174
|
role="img"
|
|
175
|
-
[attr.aria-label]="ariaSummary()"
|
|
175
|
+
[attr.aria-label]="ariaSummary()"
|
|
176
|
+
>
|
|
176
177
|
<svg:defs>
|
|
177
178
|
<svg:clipPath [attr.id]="clipPathId()">
|
|
178
179
|
<svg:rect x="0" y="0" [attr.width]="innerWidth()" [attr.height]="innerHeight()" />
|
|
@@ -191,7 +192,8 @@ class ScatterChart {
|
|
|
191
192
|
tabindex="0"
|
|
192
193
|
(click)="emitClick(p)"
|
|
193
194
|
(keydown.enter)="emitClick(p)"
|
|
194
|
-
(keydown.space)="emitClick(p); $event.preventDefault()"
|
|
195
|
+
(keydown.space)="emitClick(p); $event.preventDefault()"
|
|
196
|
+
/>
|
|
195
197
|
}
|
|
196
198
|
</svg:g>
|
|
197
199
|
<ng-content select="svg:g[ChartBrush]" />
|
|
@@ -199,13 +201,12 @@ class ScatterChart {
|
|
|
199
201
|
</svg:svg>
|
|
200
202
|
<ng-content select="ChartLegend" />
|
|
201
203
|
<ng-content select="ChartZoomControls" />
|
|
202
|
-
`, isInline: true
|
|
204
|
+
`, isInline: true });
|
|
203
205
|
}
|
|
204
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
206
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ScatterChart, decorators: [{
|
|
205
207
|
type: Component,
|
|
206
208
|
args: [{
|
|
207
209
|
selector: 'ChartScatter',
|
|
208
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
209
210
|
providers: [ScatterViewportContext],
|
|
210
211
|
host: { class: 'relative block h-full w-full', '[attr.data-style]': 'styles()' },
|
|
211
212
|
template: `
|
|
@@ -214,7 +215,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
214
215
|
[attr.viewBox]="viewBox()"
|
|
215
216
|
preserveAspectRatio="none"
|
|
216
217
|
role="img"
|
|
217
|
-
[attr.aria-label]="ariaSummary()"
|
|
218
|
+
[attr.aria-label]="ariaSummary()"
|
|
219
|
+
>
|
|
218
220
|
<svg:defs>
|
|
219
221
|
<svg:clipPath [attr.id]="clipPathId()">
|
|
220
222
|
<svg:rect x="0" y="0" [attr.width]="innerWidth()" [attr.height]="innerHeight()" />
|
|
@@ -233,7 +235,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
233
235
|
tabindex="0"
|
|
234
236
|
(click)="emitClick(p)"
|
|
235
237
|
(keydown.enter)="emitClick(p)"
|
|
236
|
-
(keydown.space)="emitClick(p); $event.preventDefault()"
|
|
238
|
+
(keydown.space)="emitClick(p); $event.preventDefault()"
|
|
239
|
+
/>
|
|
237
240
|
}
|
|
238
241
|
</svg:g>
|
|
239
242
|
<ng-content select="svg:g[ChartBrush]" />
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ojiepermana/angular-chart",
|
|
3
|
-
"version": "22.0.
|
|
3
|
+
"version": "22.0.45",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/edsis/angular.git"
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"peerDependencies": {
|
|
13
13
|
"@angular/common": ">=22.0.0",
|
|
14
14
|
"@angular/core": ">=22.0.0",
|
|
15
|
-
"@ojiepermana/angular-component": "^22.0.
|
|
15
|
+
"@ojiepermana/angular-component": "^22.0.45"
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"d3-array": "^3.2.4",
|