@orbcharts/plugins-basic 3.0.0-alpha.33 → 3.0.0-alpha.35
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/orbcharts-plugins-basic.es.js +10246 -9523
- package/dist/orbcharts-plugins-basic.umd.js +10 -10
- package/dist/src/base/BaseBarStack.d.ts +5 -1
- package/dist/src/base/BaseBars.d.ts +5 -1
- package/dist/src/base/BaseBarsTriangle.d.ts +5 -1
- package/dist/src/base/BaseDots.d.ts +33 -0
- package/dist/src/base/BaseGroupAxis.d.ts +35 -0
- package/dist/src/base/BaseLines.d.ts +3 -1
- package/dist/src/base/BaseValueAxis.d.ts +36 -0
- package/dist/src/grid/defaults.d.ts +3 -3
- package/dist/src/grid/gridObservables.d.ts +18 -4
- package/dist/src/grid/index.d.ts +1 -1
- package/dist/src/grid/plugins/Dots.d.ts +1 -3
- package/dist/src/grid/plugins/GroupAux.d.ts +3 -0
- package/dist/src/grid/plugins/GroupAxis.d.ts +1 -3
- package/dist/src/grid/plugins/ValueAxis.d.ts +1 -3
- package/dist/src/grid/plugins/ValueStackAxis.d.ts +1 -3
- package/dist/src/grid/types.d.ts +1 -1
- package/dist/src/multiGrid/defaults.d.ts +9 -2
- package/dist/src/multiGrid/index.d.ts +8 -1
- package/dist/src/multiGrid/multiGridObservables.d.ts +12 -0
- package/dist/src/multiGrid/plugins/MultiBarStack.d.ts +1 -0
- package/dist/src/multiGrid/plugins/MultiBars.d.ts +1 -0
- package/dist/src/multiGrid/plugins/MultiBarsTriangle.d.ts +1 -0
- package/dist/src/multiGrid/plugins/MultiDots.d.ts +1 -0
- package/dist/src/multiGrid/plugins/MultiGroupAxis.d.ts +1 -0
- package/dist/src/multiGrid/plugins/MultiLines.d.ts +1 -0
- package/dist/src/multiGrid/plugins/MultiValueAxis.d.ts +1 -0
- package/dist/src/multiGrid/plugins/OverlappingValueAxes.d.ts +1 -0
- package/dist/src/multiGrid/types.d.ts +31 -0
- package/package.json +2 -2
- package/src/base/BaseBarStack.ts +375 -198
- package/src/base/BaseBars.ts +297 -191
- package/src/base/BaseBarsTriangle.ts +344 -229
- package/src/base/BaseDots.ts +634 -0
- package/src/base/BaseGroupAxis.ts +497 -0
- package/src/base/BaseLines.ts +180 -50
- package/src/base/BaseValueAxis.ts +475 -0
- package/src/grid/defaults.ts +3 -3
- package/src/grid/gridObservables.ts +147 -14
- package/src/grid/index.ts +1 -1
- package/src/grid/plugins/BarStack.ts +4 -0
- package/src/grid/plugins/Bars.ts +4 -0
- package/src/grid/plugins/BarsTriangle.ts +4 -0
- package/src/grid/plugins/Dots.ts +19 -410
- package/src/grid/plugins/{GroupArea.ts → GroupAux.ts} +24 -24
- package/src/grid/plugins/GroupAxis.ts +16 -348
- package/src/grid/plugins/Lines.ts +2 -0
- package/src/grid/plugins/ScalingArea.ts +9 -6
- package/src/grid/plugins/ValueAxis.ts +13 -337
- package/src/grid/plugins/ValueStackAxis.ts +35 -336
- package/src/grid/types.ts +1 -1
- package/src/index.ts +1 -0
- package/src/multiGrid/defaults.ts +120 -14
- package/src/multiGrid/index.ts +9 -2
- package/src/multiGrid/multiGridObservables.ts +279 -0
- package/src/multiGrid/plugins/MultiBarStack.ts +60 -0
- package/src/multiGrid/plugins/MultiBars.ts +59 -0
- package/src/multiGrid/plugins/MultiBarsTriangle.ts +58 -0
- package/src/multiGrid/plugins/MultiDots.ts +58 -0
- package/src/multiGrid/plugins/MultiGridLegend.ts +9 -10
- package/src/multiGrid/plugins/MultiGroupAxis.ts +53 -0
- package/src/multiGrid/plugins/MultiLines.ts +58 -0
- package/src/multiGrid/plugins/MultiValueAxis.ts +53 -0
- package/src/multiGrid/plugins/OverlappingValueAxes.ts +165 -0
- package/src/multiGrid/types.ts +39 -0
- package/tsconfig.dev.json +17 -0
- package/tsconfig.prod.json +14 -0
- package/vite.config.js +5 -0
- package/dist/src/grid/plugins/GroupArea.d.ts +0 -3
- package/dist/src/multiGrid/plugins/BarsAndLines.d.ts +0 -1
- package/dist/src/multiGrid/plugins/FirstGroupScaleAxis.d.ts +0 -0
- package/dist/src/multiGrid/plugins/TwoValueScaleAxes.d.ts +0 -0
- package/src/multiGrid/plugins/BarStackAndLines.ts +0 -0
- package/src/multiGrid/plugins/BarsAndLines.ts +0 -126
- package/src/multiGrid/plugins/BarsTriangleAndLines.ts +0 -0
- package/src/multiGrid/plugins/FirstGroupScaleAxis.ts +0 -0
- package/src/multiGrid/plugins/TwoValueScaleAxes.ts +0 -0
- /package/dist/src/{multiGrid/plugins/BarStackAndLines.d.ts → base/BaseGroupArea.d.ts} +0 -0
- /package/{dist/src/multiGrid/plugins/BarsTriangleAndLines.d.ts → src/base/BaseGroupArea.ts} +0 -0
package/src/base/BaseLines.ts
CHANGED
@@ -14,12 +14,14 @@ import type {
|
|
14
14
|
ComputedDataGrid,
|
15
15
|
DataFormatterGrid,
|
16
16
|
EventGrid,
|
17
|
+
ContainerPosition,
|
17
18
|
ChartParams,
|
18
19
|
Layout,
|
19
20
|
TransformData } from '@orbcharts/core'
|
20
21
|
import { getD3TransitionEase } from '../utils/d3Utils'
|
21
22
|
import { getClassName, getUniID } from '../utils/orbchartsUtils'
|
22
23
|
import { gridGroupPositionFnObservable } from '../grid/gridObservables'
|
24
|
+
import { gridSelectionsObservable } from '../grid/gridObservables'
|
23
25
|
|
24
26
|
export interface BaseLinesParams {
|
25
27
|
// lineType: LineType
|
@@ -36,6 +38,7 @@ export interface BaseLinesParams {
|
|
36
38
|
interface BaseLinesContext {
|
37
39
|
selection: d3.Selection<any, unknown, any, unknown>
|
38
40
|
computedData$: Observable<ComputedDataGrid>
|
41
|
+
existedSeriesLabels$: Observable<string[]>
|
39
42
|
SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
|
40
43
|
GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
|
41
44
|
fullDataFormatter$: Observable<DataFormatterGrid>
|
@@ -48,6 +51,7 @@ interface BaseLinesContext {
|
|
48
51
|
height: number;
|
49
52
|
}>
|
50
53
|
gridHighlight$: Observable<string[]>
|
54
|
+
gridContainer$: Observable<ContainerPosition[]>
|
51
55
|
event$: Subject<EventGrid>
|
52
56
|
}
|
53
57
|
|
@@ -60,9 +64,9 @@ type ClipPathDatum = {
|
|
60
64
|
height: number;
|
61
65
|
}
|
62
66
|
|
63
|
-
const pluginName = 'Lines'
|
64
|
-
const
|
65
|
-
|
67
|
+
// const pluginName = 'Lines'
|
68
|
+
// const pathClassName = getClassName(pluginName, 'path')
|
69
|
+
|
66
70
|
|
67
71
|
function createLinePath (lineCurve: string = 'curveLinear'): d3.Line<ComputedDatumGrid> {
|
68
72
|
return d3.line<ComputedDatumGrid>()
|
@@ -96,8 +100,9 @@ function makeSegmentData (data: ComputedDatumGrid[]): ComputedDatumGrid[][] {
|
|
96
100
|
}
|
97
101
|
|
98
102
|
|
99
|
-
function renderLine ({ selection, segmentData, linePath, params }: {
|
103
|
+
function renderLine ({ selection, pathClassName, segmentData, linePath, params }: {
|
100
104
|
selection: d3.Selection<SVGGElement, unknown, any, unknown>
|
105
|
+
pathClassName: string
|
101
106
|
segmentData: ComputedDatumGrid[][]
|
102
107
|
linePath: d3.Line<ComputedDatumGrid>
|
103
108
|
params: BaseLinesParams
|
@@ -147,8 +152,10 @@ function highlightLine ({ selection, seriesLabel, fullChartParams }: {
|
|
147
152
|
}
|
148
153
|
|
149
154
|
selection
|
150
|
-
.each((
|
151
|
-
|
155
|
+
.each((currentSeriesLabel, i, n) => {
|
156
|
+
// const currentSeriesLabel = d[0] ? d[0].seriesLabel : ''
|
157
|
+
|
158
|
+
if (currentSeriesLabel === seriesLabel) {
|
152
159
|
d3.select(n[i])
|
153
160
|
.style('opacity', 1)
|
154
161
|
} else {
|
@@ -218,6 +225,7 @@ function renderClipPath ({ defsSelection, clipPathData, transitionDuration, tran
|
|
218
225
|
export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: string, {
|
219
226
|
selection,
|
220
227
|
computedData$,
|
228
|
+
existedSeriesLabels$,
|
221
229
|
SeriesDataMap$,
|
222
230
|
GroupDataMap$,
|
223
231
|
fullParams$,
|
@@ -227,43 +235,162 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
|
|
227
235
|
gridGraphicTransform$,
|
228
236
|
gridAxesSize$,
|
229
237
|
gridHighlight$,
|
238
|
+
gridContainer$,
|
230
239
|
event$
|
231
240
|
}) => {
|
232
241
|
|
233
242
|
const destroy$ = new Subject()
|
234
243
|
|
235
244
|
const clipPathID = getUniID(pluginName, 'clipPath-box')
|
245
|
+
const pathClassName = getClassName(pluginName, 'path')
|
246
|
+
// const clipPathSeriesID = getUniID(pluginName, 'clipPath')
|
247
|
+
|
248
|
+
// const axisSelection: d3.Selection<SVGGElement, any, any, any> = selection
|
249
|
+
// .append('g')
|
250
|
+
// .attr('clip-path', `url(#${clipPathID})`)
|
251
|
+
// const defsSelection: d3.Selection<SVGDefsElement, any, any, any> = axisSelection.append('defs')
|
252
|
+
// const graphicGSelection: d3.Selection<SVGGElement, any, any, any> = axisSelection.append('g')
|
253
|
+
// const graphicSelection$: Subject<d3.Selection<SVGGElement, string, any, any>> = new Subject()
|
254
|
+
|
255
|
+
|
256
|
+
// gridAxesTransform$
|
257
|
+
// .pipe(
|
258
|
+
// takeUntil(destroy$),
|
259
|
+
// map(d => d.value),
|
260
|
+
// distinctUntilChanged()
|
261
|
+
// ).subscribe(d => {
|
262
|
+
// axisSelection
|
263
|
+
// .style('transform', d)
|
264
|
+
// })
|
265
|
+
|
266
|
+
// gridGraphicTransform$
|
267
|
+
// .pipe(
|
268
|
+
// takeUntil(destroy$),
|
269
|
+
// map(d => d.value),
|
270
|
+
// distinctUntilChanged()
|
271
|
+
// ).subscribe(d => {
|
272
|
+
// graphicGSelection
|
273
|
+
// .transition()
|
274
|
+
// .duration(50)
|
275
|
+
// .style('transform', d)
|
276
|
+
// })
|
277
|
+
|
278
|
+
// const seriesSelection$ = computedData$.pipe(
|
279
|
+
// takeUntil(destroy$),
|
280
|
+
// distinctUntilChanged((a, b) => {
|
281
|
+
// // 只有當series的數量改變時,才重新計算
|
282
|
+
// return a.length === b.length
|
283
|
+
// }),
|
284
|
+
// map((computedData, i) => {
|
285
|
+
// return selection
|
286
|
+
// .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${seriesClassName}`)
|
287
|
+
// .data(computedData, d => d[0] ? d[0].seriesIndex : i)
|
288
|
+
// .join(
|
289
|
+
// enter => {
|
290
|
+
// return enter
|
291
|
+
// .append('g')
|
292
|
+
// .classed(seriesClassName, true)
|
293
|
+
// .each((d, i, g) => {
|
294
|
+
// const axesSelection = d3.select(g[i])
|
295
|
+
// .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${axesClassName}`)
|
296
|
+
// .data([i])
|
297
|
+
// .join(
|
298
|
+
// enter => {
|
299
|
+
// return enter
|
300
|
+
// .append('g')
|
301
|
+
// .classed(axesClassName, true)
|
302
|
+
// .attr('clip-path', `url(#${clipPathID})`)
|
303
|
+
// .each((d, i, g) => {
|
304
|
+
// const defsSelection = d3.select(g[i])
|
305
|
+
// .selectAll<SVGDefsElement, any>('defs')
|
306
|
+
// .data([i])
|
307
|
+
// .join('defs')
|
308
|
+
|
309
|
+
// const graphicGSelection = d3.select(g[i])
|
310
|
+
// .selectAll<SVGGElement, any>('g')
|
311
|
+
// .data([i])
|
312
|
+
// .join('g')
|
313
|
+
// .classed(graphicClassName, true)
|
314
|
+
// })
|
315
|
+
// },
|
316
|
+
// update => update,
|
317
|
+
// exit => exit.remove()
|
318
|
+
// )
|
319
|
+
// })
|
320
|
+
// },
|
321
|
+
// update => update,
|
322
|
+
// exit => exit.remove()
|
323
|
+
// )
|
324
|
+
// })
|
325
|
+
// )
|
236
326
|
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
|
243
|
-
//
|
244
|
-
//
|
327
|
+
// combineLatest({
|
328
|
+
// seriesSelection: seriesSelection$,
|
329
|
+
// gridContainer: gridContainer$
|
330
|
+
// }).pipe(
|
331
|
+
// takeUntil(destroy$),
|
332
|
+
// switchMap(async d => d)
|
333
|
+
// ).subscribe(data => {
|
334
|
+
// data.seriesSelection
|
335
|
+
// .transition()
|
336
|
+
// .attr('transform', (d, i) => {
|
337
|
+
// const translate = data.gridContainer[i].translate
|
338
|
+
// const scale = data.gridContainer[i].scale
|
339
|
+
// return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
|
340
|
+
// })
|
341
|
+
// })
|
245
342
|
|
246
|
-
gridAxesTransform$
|
247
|
-
.pipe(
|
248
|
-
takeUntil(destroy$),
|
249
|
-
map(d => d.value),
|
250
|
-
distinctUntilChanged()
|
251
|
-
).subscribe(d => {
|
252
|
-
axisSelection
|
253
|
-
.style('transform', d)
|
254
|
-
})
|
255
343
|
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
344
|
+
// const axesSelection$ = combineLatest({
|
345
|
+
// seriesSelection: seriesSelection$,
|
346
|
+
// gridAxesTransform: gridAxesTransform$
|
347
|
+
// }).pipe(
|
348
|
+
// takeUntil(destroy$),
|
349
|
+
// switchMap(async d => d),
|
350
|
+
// map(data => {
|
351
|
+
// return data.seriesSelection
|
352
|
+
// .select<SVGGElement>(`g.${axesClassName}`)
|
353
|
+
// .style('transform', data.gridAxesTransform.value)
|
354
|
+
// })
|
355
|
+
// )
|
356
|
+
// const defsSelection$ = axesSelection$.pipe(
|
357
|
+
// takeUntil(destroy$),
|
358
|
+
// map(axesSelection => {
|
359
|
+
// return axesSelection.select<SVGDefsElement>('defs')
|
360
|
+
// })
|
361
|
+
// )
|
362
|
+
// const graphicGSelection$ = combineLatest({
|
363
|
+
// axesSelection: axesSelection$,
|
364
|
+
// gridGraphicTransform: gridGraphicTransform$
|
365
|
+
// }).pipe(
|
366
|
+
// takeUntil(destroy$),
|
367
|
+
// switchMap(async d => d),
|
368
|
+
// map(data => {
|
369
|
+
// const graphicGSelection = data.axesSelection
|
370
|
+
// .select<SVGGElement>(`g.${graphicClassName}`)
|
371
|
+
// .attr('clip-path', (d) => `url(#${clipPathSeriesID}-${d[0] ? d[0].seriesLabel : ''})`)
|
372
|
+
// graphicGSelection
|
373
|
+
// .transition()
|
374
|
+
// .duration(50)
|
375
|
+
// .style('transform', data.gridGraphicTransform.value)
|
376
|
+
// return graphicGSelection
|
377
|
+
// })
|
378
|
+
// )
|
379
|
+
|
380
|
+
const {
|
381
|
+
seriesSelection$,
|
382
|
+
axesSelection$,
|
383
|
+
defsSelection$,
|
384
|
+
graphicGSelection$
|
385
|
+
} = gridSelectionsObservable({
|
386
|
+
selection,
|
387
|
+
pluginName,
|
388
|
+
clipPathID,
|
389
|
+
existedSeriesLabels$,
|
390
|
+
gridContainer$,
|
391
|
+
gridAxesTransform$,
|
392
|
+
gridGraphicTransform$
|
393
|
+
})
|
267
394
|
|
268
395
|
const linePath$: Observable<d3.Line<ComputedDatumGrid>> = new Observable(subscriber => {
|
269
396
|
const paramsSubscription = fullParams$
|
@@ -312,6 +439,7 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
|
|
312
439
|
)
|
313
440
|
|
314
441
|
const clipPathSubscription = combineLatest({
|
442
|
+
defsSelection: defsSelection$,
|
315
443
|
seriesLabels: seriesLabels$,
|
316
444
|
axisSize: gridAxesSize$,
|
317
445
|
transitionDuration: transitionDuration$,
|
@@ -338,7 +466,7 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
|
|
338
466
|
})
|
339
467
|
)
|
340
468
|
renderClipPath({
|
341
|
-
defsSelection,
|
469
|
+
defsSelection: data.defsSelection,
|
342
470
|
clipPathData,
|
343
471
|
transitionDuration: data.transitionDuration,
|
344
472
|
transitionEase: data.transitionEase
|
@@ -376,6 +504,7 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
|
|
376
504
|
)
|
377
505
|
|
378
506
|
const graphSubscription = combineLatest({
|
507
|
+
graphicGSelection: graphicGSelection$,
|
379
508
|
seriesLabels: seriesLabels$,
|
380
509
|
computedData: computedData$,
|
381
510
|
SeriesDataMap: SeriesDataMap$,
|
@@ -390,23 +519,24 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
|
|
390
519
|
switchMap(async (d) => d),
|
391
520
|
).subscribe(data => {
|
392
521
|
|
393
|
-
const updateGraphic = graphicGSelection
|
394
|
-
|
395
|
-
|
396
|
-
const enterGraphic = updateGraphic.enter()
|
397
|
-
|
398
|
-
|
399
|
-
updateGraphic.exit().remove()
|
400
|
-
const graphicSelection = updateGraphic.merge(enterGraphic)
|
401
|
-
|
522
|
+
// const updateGraphic = data.graphicGSelection
|
523
|
+
// .selectAll<SVGGElement, number>('g')
|
524
|
+
// .data(data.seriesLabels, (d, i) => d)
|
525
|
+
// const enterGraphic = updateGraphic.enter()
|
526
|
+
// .append('g')
|
527
|
+
// .classed(graphicClassName, true)
|
528
|
+
// updateGraphic.exit().remove()
|
529
|
+
// const graphicSelection = updateGraphic.merge(enterGraphic)
|
530
|
+
// .attr('clip-path', (d, i) => `url(#orbcharts__clipPath_${d})`)
|
402
531
|
|
403
532
|
// 繪圖
|
404
|
-
|
533
|
+
data.graphicGSelection.each((d, i, all) => {
|
405
534
|
// 將資料分段
|
406
535
|
const segmentData = makeSegmentData(data.computedData[i] ?? [])
|
407
536
|
|
408
537
|
const pathSelection = renderLine({
|
409
538
|
selection: d3.select(all[i]),
|
539
|
+
pathClassName,
|
410
540
|
linePath: data.linePath,
|
411
541
|
segmentData: segmentData,
|
412
542
|
params: data.params
|
@@ -518,7 +648,7 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
|
|
518
648
|
|
519
649
|
|
520
650
|
|
521
|
-
graphicSelection$.next(graphicSelection)
|
651
|
+
// graphicSelection$.next(graphicSelection)
|
522
652
|
|
523
653
|
|
524
654
|
// pathSelection = renderLine({
|
@@ -533,13 +663,13 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
|
|
533
663
|
// map(d => d.flat())
|
534
664
|
// )
|
535
665
|
// const highlight$ = highlightObservable({ datumList$, fullChartParams$, event$: store.event$ })
|
536
|
-
const highlightSubscription = gridHighlight$.subscribe()
|
666
|
+
// const highlightSubscription = gridHighlight$.subscribe()
|
537
667
|
|
538
668
|
fullChartParams$.pipe(
|
539
669
|
takeUntil(destroy$),
|
540
670
|
filter(d => d.highlightTarget === 'series'),
|
541
671
|
switchMap(d => combineLatest({
|
542
|
-
|
672
|
+
graphicGSelection: graphicGSelection$,
|
543
673
|
highlight: gridHighlight$,
|
544
674
|
DataMap: DataMap$,
|
545
675
|
fullChartParams: fullChartParams$
|
@@ -553,7 +683,7 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
|
|
553
683
|
// return
|
554
684
|
// }
|
555
685
|
highlightLine({
|
556
|
-
selection: data.
|
686
|
+
selection: data.graphicGSelection,
|
557
687
|
seriesLabel: (datum && datum.seriesLabel) ? datum.seriesLabel : null,
|
558
688
|
fullChartParams: data.fullChartParams
|
559
689
|
})
|
@@ -561,6 +691,6 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
|
|
561
691
|
|
562
692
|
return () => {
|
563
693
|
destroy$.next(undefined)
|
564
|
-
highlightSubscription.unsubscribe()
|
694
|
+
// highlightSubscription.unsubscribe()
|
565
695
|
}
|
566
696
|
}
|