@orbcharts/plugins-basic 3.0.0-alpha.41 → 3.0.0-alpha.43

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 (84) hide show
  1. package/LICENSE +200 -200
  2. package/dist/orbcharts-plugins-basic.es.js +5477 -5426
  3. package/dist/orbcharts-plugins-basic.umd.js +8 -8
  4. package/dist/src/base/BaseBarStack.d.ts +1 -1
  5. package/dist/src/base/BaseBars.d.ts +1 -1
  6. package/dist/src/base/BaseBarsTriangle.d.ts +1 -1
  7. package/dist/src/base/BaseDots.d.ts +1 -1
  8. package/dist/src/base/BaseLineAreas.d.ts +1 -1
  9. package/dist/src/base/BaseLines.d.ts +1 -1
  10. package/dist/src/multiGrid/defaults.d.ts +2 -1
  11. package/dist/src/multiGrid/index.d.ts +1 -0
  12. package/dist/src/multiGrid/plugins/MultiLineAreas.d.ts +1 -0
  13. package/dist/src/multiGrid/types.d.ts +4 -4
  14. package/package.json +42 -42
  15. package/src/base/BaseBarStack.ts +881 -879
  16. package/src/base/BaseBars.ts +750 -748
  17. package/src/base/BaseBarsTriangle.ts +659 -657
  18. package/src/base/BaseDots.ts +639 -637
  19. package/src/base/BaseGroupAxis.ts +496 -496
  20. package/src/base/BaseLegend.ts +636 -636
  21. package/src/base/BaseLineAreas.ts +621 -624
  22. package/src/base/BaseLines.ts +692 -695
  23. package/src/base/BaseValueAxis.ts +479 -479
  24. package/src/base/types.ts +2 -2
  25. package/src/grid/defaults.ts +121 -121
  26. package/src/grid/gridObservables.ts +263 -263
  27. package/src/grid/index.ts +15 -15
  28. package/src/grid/plugins/BarStack.ts +37 -37
  29. package/src/grid/plugins/Bars.ts +37 -37
  30. package/src/grid/plugins/BarsDiverging.ts +39 -39
  31. package/src/grid/plugins/BarsTriangle.ts +34 -34
  32. package/src/grid/plugins/Dots.ts +35 -35
  33. package/src/grid/plugins/GridLegend.ts +58 -58
  34. package/src/grid/plugins/GroupAux.ts +643 -643
  35. package/src/grid/plugins/GroupAxis.ts +30 -30
  36. package/src/grid/plugins/LineAreas.ts +36 -36
  37. package/src/grid/plugins/Lines.ts +35 -35
  38. package/src/grid/plugins/ScalingArea.ts +174 -174
  39. package/src/grid/plugins/ValueAxis.ts +31 -31
  40. package/src/grid/plugins/ValueStackAxis.ts +70 -70
  41. package/src/grid/types.ts +120 -120
  42. package/src/index.ts +9 -9
  43. package/src/multiGrid/defaults.ts +147 -140
  44. package/src/multiGrid/index.ts +11 -10
  45. package/src/multiGrid/multiGridObservables.ts +289 -278
  46. package/src/multiGrid/plugins/MultiBarStack.ts +60 -60
  47. package/src/multiGrid/plugins/MultiBars.ts +59 -59
  48. package/src/multiGrid/plugins/MultiBarsTriangle.ts +58 -58
  49. package/src/multiGrid/plugins/MultiDots.ts +58 -58
  50. package/src/multiGrid/plugins/MultiGridLegend.ts +88 -88
  51. package/src/multiGrid/plugins/MultiGroupAxis.ts +53 -53
  52. package/src/multiGrid/plugins/MultiLineAreas.ts +59 -0
  53. package/src/multiGrid/plugins/MultiLines.ts +58 -58
  54. package/src/multiGrid/plugins/MultiValueAxis.ts +53 -53
  55. package/src/multiGrid/plugins/OverlappingValueAxes.ts +164 -165
  56. package/src/multiGrid/types.ts +67 -67
  57. package/src/noneData/defaults.ts +61 -61
  58. package/src/noneData/index.ts +3 -3
  59. package/src/noneData/plugins/Container.ts +10 -10
  60. package/src/noneData/plugins/Tooltip.ts +304 -304
  61. package/src/noneData/types.ts +26 -26
  62. package/src/series/defaults.ts +99 -99
  63. package/src/series/index.ts +6 -6
  64. package/src/series/plugins/Bubbles.ts +551 -549
  65. package/src/series/plugins/Pie.ts +600 -598
  66. package/src/series/plugins/PieEventTexts.ts +194 -194
  67. package/src/series/plugins/PieLabels.ts +288 -285
  68. package/src/series/plugins/SeriesLegend.ts +58 -58
  69. package/src/series/seriesUtils.ts +50 -50
  70. package/src/series/types.ts +67 -67
  71. package/src/tree/defaults.ts +22 -22
  72. package/src/tree/index.ts +3 -3
  73. package/src/tree/plugins/TreeLegend.ts +58 -58
  74. package/src/tree/plugins/TreeMap.ts +302 -300
  75. package/src/tree/types.ts +23 -23
  76. package/src/utils/commonUtils.ts +21 -21
  77. package/src/utils/d3Graphics.ts +124 -124
  78. package/src/utils/d3Utils.ts +73 -73
  79. package/src/utils/observables.ts +14 -14
  80. package/src/utils/orbchartsUtils.ts +100 -100
  81. package/tsconfig.dev.json +16 -16
  82. package/tsconfig.json +13 -13
  83. package/tsconfig.prod.json +13 -13
  84. package/vite.config.js +49 -49
@@ -1,58 +1,58 @@
1
- import * as d3 from 'd3'
2
- import {
3
- combineLatest,
4
- map,
5
- switchMap,
6
- takeUntil,
7
- Observable,
8
- Subject } from 'rxjs'
9
- import {
10
- defineSeriesPlugin } from '@orbcharts/core'
11
- import { DEFAULT_SERIES_LEGEND_PARAMS } from '../defaults'
12
- import { createBaseLegend } from '../../base/BaseLegend'
13
-
14
- const pluginName = 'SeriesLegend'
15
-
16
- export const SeriesLegend = defineSeriesPlugin(pluginName, DEFAULT_SERIES_LEGEND_PARAMS)(({ selection, rootSelection, observer, subject }) => {
17
-
18
- const destroy$ = new Subject()
19
-
20
- const seriesLabels$: Observable<string[]> = observer.SeriesDataMap$.pipe(
21
- takeUntil(destroy$),
22
- map(data => {
23
- return Array.from(data.keys())
24
- })
25
- )
26
-
27
- // 全部列點矩型使用相同樣式參數
28
- const fullParams$ = observer.fullParams$.pipe(
29
- takeUntil(destroy$),
30
- map(d => {
31
- const seriesList = [
32
- {
33
- listRectWidth: d.listRectWidth,
34
- listRectHeight: d.listRectHeight,
35
- listRectRadius: d.listRectRadius,
36
- }
37
- ]
38
- return {
39
- ...d,
40
- seriesList
41
- }
42
- })
43
- )
44
-
45
- const unsubscribeBaseLegend = createBaseLegend(pluginName, {
46
- rootSelection,
47
- seriesLabels$,
48
- fullParams$,
49
- layout$: observer.layout$,
50
- fullChartParams$: observer.fullChartParams$
51
- })
52
-
53
- return () => {
54
- destroy$.next(undefined)
55
- unsubscribeBaseLegend()
56
- }
57
- })
58
-
1
+ import * as d3 from 'd3'
2
+ import {
3
+ combineLatest,
4
+ map,
5
+ switchMap,
6
+ takeUntil,
7
+ Observable,
8
+ Subject } from 'rxjs'
9
+ import {
10
+ defineSeriesPlugin } from '@orbcharts/core'
11
+ import { DEFAULT_SERIES_LEGEND_PARAMS } from '../defaults'
12
+ import { createBaseLegend } from '../../base/BaseLegend'
13
+
14
+ const pluginName = 'SeriesLegend'
15
+
16
+ export const SeriesLegend = defineSeriesPlugin(pluginName, DEFAULT_SERIES_LEGEND_PARAMS)(({ selection, rootSelection, observer, subject }) => {
17
+
18
+ const destroy$ = new Subject()
19
+
20
+ const seriesLabels$: Observable<string[]> = observer.SeriesDataMap$.pipe(
21
+ takeUntil(destroy$),
22
+ map(data => {
23
+ return Array.from(data.keys())
24
+ })
25
+ )
26
+
27
+ // 全部列點矩型使用相同樣式參數
28
+ const fullParams$ = observer.fullParams$.pipe(
29
+ takeUntil(destroy$),
30
+ map(d => {
31
+ const seriesList = [
32
+ {
33
+ listRectWidth: d.listRectWidth,
34
+ listRectHeight: d.listRectHeight,
35
+ listRectRadius: d.listRectRadius,
36
+ }
37
+ ]
38
+ return {
39
+ ...d,
40
+ seriesList
41
+ }
42
+ })
43
+ )
44
+
45
+ const unsubscribeBaseLegend = createBaseLegend(pluginName, {
46
+ rootSelection,
47
+ seriesLabels$,
48
+ fullParams$,
49
+ layout$: observer.layout$,
50
+ fullChartParams$: observer.fullChartParams$
51
+ })
52
+
53
+ return () => {
54
+ destroy$.next(undefined)
55
+ unsubscribeBaseLegend()
56
+ }
57
+ })
58
+
@@ -1,51 +1,51 @@
1
- import * as d3 from 'd3'
2
- import type { ComputedDataSeries, ComputedDatumSeries, EventName, EventSeries, HighlightTarget } from '@orbcharts/core'
3
- // import type { D3PieDatum, PieDatum } from '../types'
4
-
5
- // 由d3.pie()建出來的資料格式
6
- export interface D3PieDatum {
7
- data: any
8
- index: number,
9
- value: number,
10
- startAngle: number,
11
- endAngle: number,
12
- padAngle: number,
13
- }
14
-
15
- export interface PieDatum extends D3PieDatum {
16
- data: ComputedDatumSeries
17
- id: string
18
- }
19
-
20
- export function makePieData ({ computedDataSeries, startAngle, endAngle }: {
21
- computedDataSeries: ComputedDataSeries
22
- startAngle: number
23
- endAngle: number
24
- // itemLabels: string[]
25
- // arcLabels: string[]
26
- }): PieDatum[] {
27
- let pie = d3.pie<any, any>()
28
- .startAngle(startAngle)
29
- // .endAngle(startAngle + (endAngle - startAngle) * t)
30
- .endAngle(endAngle)
31
- .value((d) => d.visible == false ? 0 : d.value)
32
- // .sort(null) // 不要排序
33
- .sort((a, b) => a.sortedIndex - b.sortedIndex)
34
- // .sort((a: any, b: any) => {
35
- // return b.value - a.value
36
- // })
37
- // .sort(d3.ascending)
38
- const pieData = pie(computedDataSeries)
39
- return pieData.map((d: D3PieDatum, i: number) => {
40
- // const itemLabel = d.data.itemLabel
41
- let _d: any = d
42
- _d.id = d.data.id
43
- return _d
44
- // return {
45
- // ...d,
46
- // itemIndex: itemLabels.indexOf(itemLabel),
47
- // itemLabel,
48
- // id: d.data.id,
49
- // }
50
- })
1
+ import * as d3 from 'd3'
2
+ import type { ComputedDataSeries, ComputedDatumSeries, EventName, EventSeries, HighlightTarget } from '@orbcharts/core'
3
+ // import type { D3PieDatum, PieDatum } from '../types'
4
+
5
+ // 由d3.pie()建出來的資料格式
6
+ export interface D3PieDatum {
7
+ data: any
8
+ index: number,
9
+ value: number,
10
+ startAngle: number,
11
+ endAngle: number,
12
+ padAngle: number,
13
+ }
14
+
15
+ export interface PieDatum extends D3PieDatum {
16
+ data: ComputedDatumSeries
17
+ id: string
18
+ }
19
+
20
+ export function makePieData ({ computedDataSeries, startAngle, endAngle }: {
21
+ computedDataSeries: ComputedDataSeries
22
+ startAngle: number
23
+ endAngle: number
24
+ // itemLabels: string[]
25
+ // arcLabels: string[]
26
+ }): PieDatum[] {
27
+ let pie = d3.pie<any, any>()
28
+ .startAngle(startAngle)
29
+ // .endAngle(startAngle + (endAngle - startAngle) * t)
30
+ .endAngle(endAngle)
31
+ .value((d) => d.visible == false ? 0 : d.value)
32
+ // .sort(null) // 不要排序
33
+ .sort((a, b) => a.sortedIndex - b.sortedIndex)
34
+ // .sort((a: any, b: any) => {
35
+ // return b.value - a.value
36
+ // })
37
+ // .sort(d3.ascending)
38
+ const pieData = pie(computedDataSeries)
39
+ return pieData.map((d: D3PieDatum, i: number) => {
40
+ // const itemLabel = d.data.itemLabel
41
+ let _d: any = d
42
+ _d.id = d.data.id
43
+ return _d
44
+ // return {
45
+ // ...d,
46
+ // itemIndex: itemLabels.indexOf(itemLabel),
47
+ // itemLabel,
48
+ // id: d.data.id,
49
+ // }
50
+ })
51
51
  }
@@ -1,67 +1,67 @@
1
- import type { ComputedDatumSeries, EventSeries, EventName, ColorType } from '@orbcharts/core'
2
- // import type { BaseLegendParams } from '../base/BaseLegend'
3
-
4
- export type BubbleScaleType = 'area' | 'radius'
5
-
6
- export interface BubblesParams {
7
- force: {
8
- strength: number; // 泡泡引力
9
- velocityDecay: number; // 衰減數
10
- collisionSpacing: number // 泡泡間距
11
- }
12
- bubbleText: {
13
- fillRate: number
14
- lineHeight: number
15
- lineLengthMin: number
16
- }
17
- highlightRIncrease: number
18
- bubbleScaleType: BubbleScaleType
19
- }
20
-
21
- export interface PieParams {
22
- // padding: Padding
23
- outerRadius: number;
24
- innerRadius: number;
25
- outerMouseoverRadius: number;
26
- // label?: LabelStyle
27
- enterDuration: number
28
- startAngle: number
29
- endAngle: number
30
- padAngle: number
31
- // padRadius: number
32
- cornerRadius: number
33
- }
34
-
35
- export interface PieEventTextsParams {
36
- eventFn: (d: EventSeries, eventName: EventName, t: number) => string[]
37
- textAttrs: Array<{ [key:string]: string | number }>
38
- textStyles: Array<{ [key:string]: string | number }>
39
- }
40
-
41
- export interface PieLabelsParams {
42
- // solidColor?: string;
43
- // colors?: string[];
44
- outerRadius: number
45
- outerMouseoverRadius: number
46
- // innerRadius?: number;
47
- // enterDuration?: number
48
- startAngle: number
49
- endAngle: number
50
- labelCentroid: number
51
- // fontSize?: number
52
- labelFn: ((d: ComputedDatumSeries) => string)
53
- labelColorType: ColorType
54
- }
55
-
56
- export interface SeriesLegendParams {
57
- position: 'top' | 'bottom' | 'left' | 'right'
58
- justify: 'start' | 'center' | 'end'
59
- padding: number
60
- backgroundFill: ColorType
61
- backgroundStroke: ColorType
62
- gap: number
63
- listRectWidth: number
64
- listRectHeight: number
65
- listRectRadius: number
66
- textColorType: ColorType
67
- }
1
+ import type { ComputedDatumSeries, EventSeries, EventName, ColorType } from '@orbcharts/core'
2
+ // import type { BaseLegendParams } from '../base/BaseLegend'
3
+
4
+ export type BubbleScaleType = 'area' | 'radius'
5
+
6
+ export interface BubblesParams {
7
+ force: {
8
+ strength: number; // 泡泡引力
9
+ velocityDecay: number; // 衰減數
10
+ collisionSpacing: number // 泡泡間距
11
+ }
12
+ bubbleText: {
13
+ fillRate: number
14
+ lineHeight: number
15
+ lineLengthMin: number
16
+ }
17
+ highlightRIncrease: number
18
+ bubbleScaleType: BubbleScaleType
19
+ }
20
+
21
+ export interface PieParams {
22
+ // padding: Padding
23
+ outerRadius: number;
24
+ innerRadius: number;
25
+ outerMouseoverRadius: number;
26
+ // label?: LabelStyle
27
+ enterDuration: number
28
+ startAngle: number
29
+ endAngle: number
30
+ padAngle: number
31
+ // padRadius: number
32
+ cornerRadius: number
33
+ }
34
+
35
+ export interface PieEventTextsParams {
36
+ eventFn: (d: EventSeries, eventName: EventName, t: number) => string[]
37
+ textAttrs: Array<{ [key:string]: string | number }>
38
+ textStyles: Array<{ [key:string]: string | number }>
39
+ }
40
+
41
+ export interface PieLabelsParams {
42
+ // solidColor?: string;
43
+ // colors?: string[];
44
+ outerRadius: number
45
+ outerMouseoverRadius: number
46
+ // innerRadius?: number;
47
+ // enterDuration?: number
48
+ startAngle: number
49
+ endAngle: number
50
+ labelCentroid: number
51
+ // fontSize?: number
52
+ labelFn: ((d: ComputedDatumSeries) => string)
53
+ labelColorType: ColorType
54
+ }
55
+
56
+ export interface SeriesLegendParams {
57
+ position: 'top' | 'bottom' | 'left' | 'right'
58
+ justify: 'start' | 'center' | 'end'
59
+ padding: number
60
+ backgroundFill: ColorType
61
+ backgroundStroke: ColorType
62
+ gap: number
63
+ listRectWidth: number
64
+ listRectHeight: number
65
+ listRectRadius: number
66
+ textColorType: ColorType
67
+ }
@@ -1,22 +1,22 @@
1
- import type { TreeMapParams, TreeLegendParams } from './types'
2
-
3
- export const DEFAULT_TREE_MAP_PARAMS: TreeMapParams = {
4
- paddingInner: 2,
5
- paddingOuter: 2,
6
- labelColorType: 'primary',
7
- squarifyRatio: 1.618034, // 黃金比例
8
- sort: (a, b) => b.value - a.value
9
- }
10
-
11
- export const DEFAULT_TREE_LEGEND_PARAMS: TreeLegendParams = {
12
- position: 'right',
13
- justify: 'end',
14
- padding: 28,
15
- backgroundFill: 'none',
16
- backgroundStroke: 'none',
17
- gap: 10,
18
- listRectWidth: 14,
19
- listRectHeight: 14,
20
- listRectRadius: 0,
21
- textColorType: 'primary'
22
- }
1
+ import type { TreeMapParams, TreeLegendParams } from './types'
2
+
3
+ export const DEFAULT_TREE_MAP_PARAMS: TreeMapParams = {
4
+ paddingInner: 2,
5
+ paddingOuter: 2,
6
+ labelColorType: 'primary',
7
+ squarifyRatio: 1.618034, // 黃金比例
8
+ sort: (a, b) => b.value - a.value
9
+ }
10
+
11
+ export const DEFAULT_TREE_LEGEND_PARAMS: TreeLegendParams = {
12
+ position: 'right',
13
+ justify: 'end',
14
+ padding: 28,
15
+ backgroundFill: 'none',
16
+ backgroundStroke: 'none',
17
+ gap: 10,
18
+ listRectWidth: 14,
19
+ listRectHeight: 14,
20
+ listRectRadius: 0,
21
+ textColorType: 'primary'
22
+ }
package/src/tree/index.ts CHANGED
@@ -1,4 +1,4 @@
1
- export * from './defaults'
2
- export * from './types'
3
- export { TreeLegend } from './plugins/TreeLegend'
1
+ export * from './defaults'
2
+ export * from './types'
3
+ export { TreeLegend } from './plugins/TreeLegend'
4
4
  export { TreeMap } from './plugins/TreeMap'
@@ -1,58 +1,58 @@
1
- import * as d3 from 'd3'
2
- import {
3
- combineLatest,
4
- map,
5
- switchMap,
6
- takeUntil,
7
- Observable,
8
- Subject } from 'rxjs'
9
- import {
10
- defineTreePlugin } from '@orbcharts/core'
11
- import { DEFAULT_TREE_LEGEND_PARAMS } from '../defaults'
12
- import { createBaseLegend } from '../../base/BaseLegend'
13
-
14
- const pluginName = 'TreeLegend'
15
-
16
- export const TreeLegend = defineTreePlugin(pluginName, DEFAULT_TREE_LEGEND_PARAMS)(({ selection, rootSelection, observer, subject }) => {
17
-
18
- const destroy$ = new Subject()
19
-
20
- const categoryLabels$: Observable<string[]> = observer.CategoryDataMap$.pipe(
21
- takeUntil(destroy$),
22
- map(data => {
23
- return Array.from(data.keys())
24
- })
25
- )
26
-
27
- // 全部列點矩型使用相同樣式參數
28
- const fullParams$ = observer.fullParams$.pipe(
29
- takeUntil(destroy$),
30
- map(d => {
31
- const seriesList = [
32
- {
33
- listRectWidth: d.listRectWidth,
34
- listRectHeight: d.listRectHeight,
35
- listRectRadius: d.listRectRadius,
36
- }
37
- ]
38
- return {
39
- ...d,
40
- seriesList
41
- }
42
- })
43
- )
44
-
45
- const unsubscribeBaseLegend = createBaseLegend(pluginName, {
46
- rootSelection,
47
- seriesLabels$: categoryLabels$,
48
- fullParams$,
49
- layout$: observer.layout$,
50
- fullChartParams$: observer.fullChartParams$
51
- })
52
-
53
- return () => {
54
- destroy$.next(undefined)
55
- unsubscribeBaseLegend()
56
- }
57
- })
58
-
1
+ import * as d3 from 'd3'
2
+ import {
3
+ combineLatest,
4
+ map,
5
+ switchMap,
6
+ takeUntil,
7
+ Observable,
8
+ Subject } from 'rxjs'
9
+ import {
10
+ defineTreePlugin } from '@orbcharts/core'
11
+ import { DEFAULT_TREE_LEGEND_PARAMS } from '../defaults'
12
+ import { createBaseLegend } from '../../base/BaseLegend'
13
+
14
+ const pluginName = 'TreeLegend'
15
+
16
+ export const TreeLegend = defineTreePlugin(pluginName, DEFAULT_TREE_LEGEND_PARAMS)(({ selection, rootSelection, observer, subject }) => {
17
+
18
+ const destroy$ = new Subject()
19
+
20
+ const categoryLabels$: Observable<string[]> = observer.CategoryDataMap$.pipe(
21
+ takeUntil(destroy$),
22
+ map(data => {
23
+ return Array.from(data.keys())
24
+ })
25
+ )
26
+
27
+ // 全部列點矩型使用相同樣式參數
28
+ const fullParams$ = observer.fullParams$.pipe(
29
+ takeUntil(destroy$),
30
+ map(d => {
31
+ const seriesList = [
32
+ {
33
+ listRectWidth: d.listRectWidth,
34
+ listRectHeight: d.listRectHeight,
35
+ listRectRadius: d.listRectRadius,
36
+ }
37
+ ]
38
+ return {
39
+ ...d,
40
+ seriesList
41
+ }
42
+ })
43
+ )
44
+
45
+ const unsubscribeBaseLegend = createBaseLegend(pluginName, {
46
+ rootSelection,
47
+ seriesLabels$: categoryLabels$,
48
+ fullParams$,
49
+ layout$: observer.layout$,
50
+ fullChartParams$: observer.fullChartParams$
51
+ })
52
+
53
+ return () => {
54
+ destroy$.next(undefined)
55
+ unsubscribeBaseLegend()
56
+ }
57
+ })
58
+