@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.
Files changed (80) hide show
  1. package/dist/orbcharts-plugins-basic.es.js +10246 -9523
  2. package/dist/orbcharts-plugins-basic.umd.js +10 -10
  3. package/dist/src/base/BaseBarStack.d.ts +5 -1
  4. package/dist/src/base/BaseBars.d.ts +5 -1
  5. package/dist/src/base/BaseBarsTriangle.d.ts +5 -1
  6. package/dist/src/base/BaseDots.d.ts +33 -0
  7. package/dist/src/base/BaseGroupAxis.d.ts +35 -0
  8. package/dist/src/base/BaseLines.d.ts +3 -1
  9. package/dist/src/base/BaseValueAxis.d.ts +36 -0
  10. package/dist/src/grid/defaults.d.ts +3 -3
  11. package/dist/src/grid/gridObservables.d.ts +18 -4
  12. package/dist/src/grid/index.d.ts +1 -1
  13. package/dist/src/grid/plugins/Dots.d.ts +1 -3
  14. package/dist/src/grid/plugins/GroupAux.d.ts +3 -0
  15. package/dist/src/grid/plugins/GroupAxis.d.ts +1 -3
  16. package/dist/src/grid/plugins/ValueAxis.d.ts +1 -3
  17. package/dist/src/grid/plugins/ValueStackAxis.d.ts +1 -3
  18. package/dist/src/grid/types.d.ts +1 -1
  19. package/dist/src/multiGrid/defaults.d.ts +9 -2
  20. package/dist/src/multiGrid/index.d.ts +8 -1
  21. package/dist/src/multiGrid/multiGridObservables.d.ts +12 -0
  22. package/dist/src/multiGrid/plugins/MultiBarStack.d.ts +1 -0
  23. package/dist/src/multiGrid/plugins/MultiBars.d.ts +1 -0
  24. package/dist/src/multiGrid/plugins/MultiBarsTriangle.d.ts +1 -0
  25. package/dist/src/multiGrid/plugins/MultiDots.d.ts +1 -0
  26. package/dist/src/multiGrid/plugins/MultiGroupAxis.d.ts +1 -0
  27. package/dist/src/multiGrid/plugins/MultiLines.d.ts +1 -0
  28. package/dist/src/multiGrid/plugins/MultiValueAxis.d.ts +1 -0
  29. package/dist/src/multiGrid/plugins/OverlappingValueAxes.d.ts +1 -0
  30. package/dist/src/multiGrid/types.d.ts +31 -0
  31. package/package.json +2 -2
  32. package/src/base/BaseBarStack.ts +375 -198
  33. package/src/base/BaseBars.ts +297 -191
  34. package/src/base/BaseBarsTriangle.ts +344 -229
  35. package/src/base/BaseDots.ts +634 -0
  36. package/src/base/BaseGroupAxis.ts +497 -0
  37. package/src/base/BaseLines.ts +180 -50
  38. package/src/base/BaseValueAxis.ts +475 -0
  39. package/src/grid/defaults.ts +3 -3
  40. package/src/grid/gridObservables.ts +147 -14
  41. package/src/grid/index.ts +1 -1
  42. package/src/grid/plugins/BarStack.ts +4 -0
  43. package/src/grid/plugins/Bars.ts +4 -0
  44. package/src/grid/plugins/BarsTriangle.ts +4 -0
  45. package/src/grid/plugins/Dots.ts +19 -410
  46. package/src/grid/plugins/{GroupArea.ts → GroupAux.ts} +24 -24
  47. package/src/grid/plugins/GroupAxis.ts +16 -348
  48. package/src/grid/plugins/Lines.ts +2 -0
  49. package/src/grid/plugins/ScalingArea.ts +9 -6
  50. package/src/grid/plugins/ValueAxis.ts +13 -337
  51. package/src/grid/plugins/ValueStackAxis.ts +35 -336
  52. package/src/grid/types.ts +1 -1
  53. package/src/index.ts +1 -0
  54. package/src/multiGrid/defaults.ts +120 -14
  55. package/src/multiGrid/index.ts +9 -2
  56. package/src/multiGrid/multiGridObservables.ts +279 -0
  57. package/src/multiGrid/plugins/MultiBarStack.ts +60 -0
  58. package/src/multiGrid/plugins/MultiBars.ts +59 -0
  59. package/src/multiGrid/plugins/MultiBarsTriangle.ts +58 -0
  60. package/src/multiGrid/plugins/MultiDots.ts +58 -0
  61. package/src/multiGrid/plugins/MultiGridLegend.ts +9 -10
  62. package/src/multiGrid/plugins/MultiGroupAxis.ts +53 -0
  63. package/src/multiGrid/plugins/MultiLines.ts +58 -0
  64. package/src/multiGrid/plugins/MultiValueAxis.ts +53 -0
  65. package/src/multiGrid/plugins/OverlappingValueAxes.ts +165 -0
  66. package/src/multiGrid/types.ts +39 -0
  67. package/tsconfig.dev.json +17 -0
  68. package/tsconfig.prod.json +14 -0
  69. package/vite.config.js +5 -0
  70. package/dist/src/grid/plugins/GroupArea.d.ts +0 -3
  71. package/dist/src/multiGrid/plugins/BarsAndLines.d.ts +0 -1
  72. package/dist/src/multiGrid/plugins/FirstGroupScaleAxis.d.ts +0 -0
  73. package/dist/src/multiGrid/plugins/TwoValueScaleAxes.d.ts +0 -0
  74. package/src/multiGrid/plugins/BarStackAndLines.ts +0 -0
  75. package/src/multiGrid/plugins/BarsAndLines.ts +0 -126
  76. package/src/multiGrid/plugins/BarsTriangleAndLines.ts +0 -0
  77. package/src/multiGrid/plugins/FirstGroupScaleAxis.ts +0 -0
  78. package/src/multiGrid/plugins/TwoValueScaleAxes.ts +0 -0
  79. /package/dist/src/{multiGrid/plugins/BarStackAndLines.d.ts → base/BaseGroupArea.d.ts} +0 -0
  80. /package/{dist/src/multiGrid/plugins/BarsTriangleAndLines.d.ts → src/base/BaseGroupArea.ts} +0 -0
@@ -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 gClassName = getClassName(pluginName, 'g')
65
- const pathClassName = getClassName(pluginName, 'path')
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((d, i, n) => {
151
- if (d === seriesLabel) {
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
- const axisSelection: d3.Selection<SVGGElement, any, any, any> = selection
238
- .append('g')
239
- .attr('clip-path', `url(#${clipPathID})`)
240
- const defsSelection: d3.Selection<SVGDefsElement, any, any, any> = axisSelection.append('defs')
241
- const graphicGSelection: d3.Selection<SVGGElement, any, any, any> = axisSelection.append('g')
242
- const graphicSelection$: Subject<d3.Selection<SVGGElement, string, any, any>> = new Subject()
243
- // let pathSelection: d3.Selection<SVGPathElement, ComputedDatumGrid[], any, any> | undefined
244
- // .style('transform', 'translate(0px, 0px) scale(1)')
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
- gridGraphicTransform$
257
- .pipe(
258
- takeUntil(destroy$),
259
- map(d => d.value),
260
- distinctUntilChanged()
261
- ).subscribe(d => {
262
- graphicGSelection
263
- .transition()
264
- .duration(50)
265
- .style('transform', d)
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
- .selectAll<SVGGElement, number>('g')
395
- .data(data.seriesLabels, (d, i) => d)
396
- const enterGraphic = updateGraphic.enter()
397
- .append('g')
398
- .classed(gClassName, true)
399
- updateGraphic.exit().remove()
400
- const graphicSelection = updateGraphic.merge(enterGraphic)
401
- .attr('clip-path', (d, i) => `url(#orbcharts__clipPath_${d})`)
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
- graphicSelection.each((d, i, all) => {
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
- graphicSelection: graphicSelection$,
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.graphicSelection,
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
  }