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

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 (75) hide show
  1. package/LICENSE +200 -200
  2. package/dist/orbcharts-plugins-basic.es.js +5611 -5571
  3. package/dist/orbcharts-plugins-basic.umd.js +7 -7
  4. package/dist/src/base/BaseLegend.d.ts +1 -0
  5. package/package.json +42 -42
  6. package/src/base/BaseBarStack.ts +881 -881
  7. package/src/base/BaseBars.ts +750 -750
  8. package/src/base/BaseBarsTriangle.ts +659 -659
  9. package/src/base/BaseDots.ts +639 -639
  10. package/src/base/BaseGroupAxis.ts +496 -496
  11. package/src/base/BaseLegend.ts +641 -636
  12. package/src/base/BaseLineAreas.ts +621 -621
  13. package/src/base/BaseLines.ts +692 -692
  14. package/src/base/BaseValueAxis.ts +479 -479
  15. package/src/base/types.ts +2 -2
  16. package/src/grid/defaults.ts +121 -121
  17. package/src/grid/gridObservables.ts +263 -263
  18. package/src/grid/index.ts +15 -15
  19. package/src/grid/plugins/BarStack.ts +37 -37
  20. package/src/grid/plugins/Bars.ts +37 -37
  21. package/src/grid/plugins/BarsDiverging.ts +39 -39
  22. package/src/grid/plugins/BarsTriangle.ts +34 -34
  23. package/src/grid/plugins/Dots.ts +35 -35
  24. package/src/grid/plugins/GridLegend.ts +59 -58
  25. package/src/grid/plugins/GroupAux.ts +646 -643
  26. package/src/grid/plugins/GroupAxis.ts +30 -30
  27. package/src/grid/plugins/LineAreas.ts +36 -36
  28. package/src/grid/plugins/Lines.ts +35 -35
  29. package/src/grid/plugins/ScalingArea.ts +174 -174
  30. package/src/grid/plugins/ValueAxis.ts +31 -31
  31. package/src/grid/plugins/ValueStackAxis.ts +70 -70
  32. package/src/grid/types.ts +120 -120
  33. package/src/index.ts +9 -9
  34. package/src/multiGrid/defaults.ts +147 -147
  35. package/src/multiGrid/index.ts +11 -11
  36. package/src/multiGrid/multiGridObservables.ts +289 -289
  37. package/src/multiGrid/plugins/MultiBarStack.ts +60 -60
  38. package/src/multiGrid/plugins/MultiBars.ts +59 -59
  39. package/src/multiGrid/plugins/MultiBarsTriangle.ts +58 -58
  40. package/src/multiGrid/plugins/MultiDots.ts +58 -58
  41. package/src/multiGrid/plugins/MultiGridLegend.ts +89 -88
  42. package/src/multiGrid/plugins/MultiGroupAxis.ts +53 -53
  43. package/src/multiGrid/plugins/MultiLineAreas.ts +59 -59
  44. package/src/multiGrid/plugins/MultiLines.ts +58 -58
  45. package/src/multiGrid/plugins/MultiValueAxis.ts +53 -53
  46. package/src/multiGrid/plugins/OverlappingValueAxes.ts +164 -164
  47. package/src/multiGrid/types.ts +67 -67
  48. package/src/noneData/defaults.ts +61 -61
  49. package/src/noneData/index.ts +3 -3
  50. package/src/noneData/plugins/Container.ts +10 -10
  51. package/src/noneData/plugins/Tooltip.ts +310 -304
  52. package/src/noneData/types.ts +26 -26
  53. package/src/series/defaults.ts +99 -99
  54. package/src/series/index.ts +6 -6
  55. package/src/series/plugins/Bubbles.ts +551 -551
  56. package/src/series/plugins/Pie.ts +600 -600
  57. package/src/series/plugins/PieEventTexts.ts +194 -194
  58. package/src/series/plugins/PieLabels.ts +288 -288
  59. package/src/series/plugins/SeriesLegend.ts +59 -58
  60. package/src/series/seriesUtils.ts +50 -50
  61. package/src/series/types.ts +67 -67
  62. package/src/tree/defaults.ts +22 -22
  63. package/src/tree/index.ts +3 -3
  64. package/src/tree/plugins/TreeLegend.ts +59 -58
  65. package/src/tree/plugins/TreeMap.ts +305 -302
  66. package/src/tree/types.ts +23 -23
  67. package/src/utils/commonUtils.ts +21 -21
  68. package/src/utils/d3Graphics.ts +124 -124
  69. package/src/utils/d3Utils.ts +73 -73
  70. package/src/utils/observables.ts +14 -14
  71. package/src/utils/orbchartsUtils.ts +100 -100
  72. package/tsconfig.dev.json +16 -16
  73. package/tsconfig.json +13 -13
  74. package/tsconfig.prod.json +13 -13
  75. package/vite.config.js +49 -49
@@ -1,58 +1,59 @@
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
+ textSizePx$: observer.textSizePx$
52
+ })
53
+
54
+ return () => {
55
+ destroy$.next(undefined)
56
+ unsubscribeBaseLegend()
57
+ }
58
+ })
59
+
@@ -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,59 @@
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
+ textSizePx$: observer.textSizePx$
52
+ })
53
+
54
+ return () => {
55
+ destroy$.next(undefined)
56
+ unsubscribeBaseLegend()
57
+ }
58
+ })
59
+