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

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 (56) hide show
  1. package/dist/orbcharts-plugins-basic.es.js +7449 -7078
  2. package/dist/orbcharts-plugins-basic.umd.js +12 -9
  3. package/dist/src/base/BaseBarStack.d.ts +1 -1
  4. package/dist/src/base/BaseBars.d.ts +1 -1
  5. package/dist/src/base/BaseBarsTriangle.d.ts +1 -1
  6. package/dist/src/base/BaseDots.d.ts +1 -1
  7. package/dist/src/base/BaseLegend.d.ts +1 -0
  8. package/dist/src/base/BaseLineAreas.d.ts +30 -0
  9. package/dist/src/base/BaseLines.d.ts +1 -1
  10. package/dist/src/grid/defaults.d.ts +2 -1
  11. package/dist/src/grid/gridObservables.d.ts +2 -2
  12. package/dist/src/grid/index.d.ts +1 -0
  13. package/dist/src/grid/plugins/LineAreas.d.ts +1 -0
  14. package/dist/src/grid/types.d.ts +5 -0
  15. package/dist/src/multiGrid/types.d.ts +1 -0
  16. package/dist/src/series/types.d.ts +1 -0
  17. package/dist/src/tree/types.d.ts +1 -0
  18. package/dist/src/utils/orbchartsUtils.d.ts +7 -2
  19. package/package.json +2 -2
  20. package/src/base/BaseBarStack.ts +7 -3
  21. package/src/base/BaseBars.ts +7 -3
  22. package/src/base/BaseBarsTriangle.ts +52 -135
  23. package/src/base/BaseDots.ts +7 -3
  24. package/src/base/BaseLegend.ts +16 -1
  25. package/src/base/BaseLineAreas.ts +625 -0
  26. package/src/base/BaseLines.ts +12 -12
  27. package/src/base/BaseValueAxis.ts +0 -1
  28. package/src/grid/defaults.ts +7 -0
  29. package/src/grid/gridObservables.ts +5 -5
  30. package/src/grid/index.ts +1 -0
  31. package/src/grid/plugins/BarStack.ts +1 -1
  32. package/src/grid/plugins/Bars.ts +1 -1
  33. package/src/grid/plugins/BarsDiverging.ts +1 -1
  34. package/src/grid/plugins/BarsTriangle.ts +1 -1
  35. package/src/grid/plugins/Dots.ts +1 -1
  36. package/src/grid/plugins/GroupAux.ts +8 -0
  37. package/src/grid/plugins/LineAreas.ts +37 -0
  38. package/src/grid/plugins/Lines.ts +1 -1
  39. package/src/grid/plugins/ScalingArea.ts +11 -7
  40. package/src/grid/types.ts +6 -1
  41. package/src/multiGrid/defaults.ts +2 -1
  42. package/src/multiGrid/multiGridObservables.ts +6 -6
  43. package/src/multiGrid/plugins/MultiBarStack.ts +1 -1
  44. package/src/multiGrid/plugins/MultiBars.ts +1 -1
  45. package/src/multiGrid/plugins/MultiBarsTriangle.ts +1 -1
  46. package/src/multiGrid/plugins/MultiDots.ts +1 -1
  47. package/src/multiGrid/plugins/MultiLines.ts +1 -1
  48. package/src/multiGrid/types.ts +1 -0
  49. package/src/noneData/defaults.ts +21 -7
  50. package/src/series/defaults.ts +1 -0
  51. package/src/series/types.ts +1 -0
  52. package/src/tree/defaults.ts +1 -0
  53. package/src/tree/plugins/TreeMap.ts +6 -4
  54. package/src/tree/types.ts +1 -0
  55. package/src/utils/orbchartsUtils.ts +22 -8
  56. package/tsconfig.json +1 -1
@@ -11,7 +11,7 @@ interface BaseBarStackContext {
11
11
  selection: d3.Selection<any, unknown, any, unknown>;
12
12
  computedData$: Observable<ComputedDataGrid>;
13
13
  visibleComputedData$: Observable<ComputedDatumGrid[][]>;
14
- existedSeriesLabels$: Observable<string[]>;
14
+ existSeriesLabels$: Observable<string[]>;
15
15
  SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
16
16
  GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
17
17
  fullParams$: Observable<BaseBarStackParams>;
@@ -12,7 +12,7 @@ interface BaseBarsContext {
12
12
  selection: d3.Selection<any, unknown, any, unknown>;
13
13
  computedData$: Observable<ComputedDataGrid>;
14
14
  visibleComputedData$: Observable<ComputedDatumGrid[][]>;
15
- existedSeriesLabels$: Observable<string[]>;
15
+ existSeriesLabels$: Observable<string[]>;
16
16
  SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
17
17
  GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
18
18
  fullParams$: Observable<BaseBarsParams>;
@@ -12,7 +12,7 @@ interface BaseBarsContext {
12
12
  selection: d3.Selection<any, unknown, any, unknown>;
13
13
  computedData$: Observable<ComputedDataGrid>;
14
14
  visibleComputedData$: Observable<ComputedDatumGrid[][]>;
15
- existedSeriesLabels$: Observable<string[]>;
15
+ existSeriesLabels$: Observable<string[]>;
16
16
  SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
17
17
  GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
18
18
  fullParams$: Observable<BaseBarsTriangleParams>;
@@ -13,7 +13,7 @@ interface BaseDotsContext {
13
13
  selection: d3.Selection<any, unknown, any, unknown>;
14
14
  computedData$: Observable<ComputedDataGrid>;
15
15
  visibleComputedData$: Observable<ComputedDatumGrid[][]>;
16
- existedSeriesLabels$: Observable<string[]>;
16
+ existSeriesLabels$: Observable<string[]>;
17
17
  SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
18
18
  GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
19
19
  fullParams$: Observable<BaseDotsParams>;
@@ -8,6 +8,7 @@ export interface BaseLegendParams {
8
8
  padding: number;
9
9
  backgroundFill: ColorType;
10
10
  backgroundStroke: ColorType;
11
+ textColorType: ColorType;
11
12
  gap: number;
12
13
  seriesList: Array<{
13
14
  listRectWidth: number;
@@ -0,0 +1,30 @@
1
+ import { Observable, Subject } from 'rxjs';
2
+ import { BasePluginFn } from './types';
3
+ import { ComputedDatumGrid, ComputedDataGrid, DataFormatterGrid, EventGrid, ContainerPosition, ChartParams, Layout, TransformData } from '@orbcharts/core';
4
+ import * as d3 from 'd3';
5
+ export interface BaseLineAreasParams {
6
+ lineCurve: string;
7
+ linearGradientOpacity: [number, number];
8
+ }
9
+ interface BaseLineAreasContext {
10
+ selection: d3.Selection<any, unknown, any, unknown>;
11
+ computedData$: Observable<ComputedDataGrid>;
12
+ existSeriesLabels$: Observable<string[]>;
13
+ SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
14
+ GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
15
+ fullDataFormatter$: Observable<DataFormatterGrid>;
16
+ fullParams$: Observable<BaseLineAreasParams>;
17
+ fullChartParams$: Observable<ChartParams>;
18
+ gridAxesTransform$: Observable<TransformData>;
19
+ gridGraphicTransform$: Observable<TransformData>;
20
+ gridAxesSize$: Observable<{
21
+ width: number;
22
+ height: number;
23
+ }>;
24
+ gridHighlight$: Observable<string[]>;
25
+ gridContainer$: Observable<ContainerPosition[]>;
26
+ layout$: Observable<Layout>;
27
+ event$: Subject<EventGrid>;
28
+ }
29
+ export declare const createBaseLineAreas: BasePluginFn<BaseLineAreasContext>;
30
+ export {};
@@ -9,7 +9,7 @@ export interface BaseLinesParams {
9
9
  interface BaseLinesContext {
10
10
  selection: d3.Selection<any, unknown, any, unknown>;
11
11
  computedData$: Observable<ComputedDataGrid>;
12
- existedSeriesLabels$: Observable<string[]>;
12
+ existSeriesLabels$: Observable<string[]>;
13
13
  SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
14
14
  GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
15
15
  fullDataFormatter$: Observable<DataFormatterGrid>;
@@ -1,6 +1,7 @@
1
- import { LinesParams, GroupAuxParams, DotsParams, BarsParams, BarStackParams, BarsTriangleParams, GroupAxisParams, ValueAxisParams, ValueStackAxisParams, ScalingAreaParams, GridLegendParams } from './types';
1
+ import { LinesParams, LineAreasParams, GroupAuxParams, DotsParams, BarsParams, BarStackParams, BarsTriangleParams, GroupAxisParams, ValueAxisParams, ValueStackAxisParams, ScalingAreaParams, GridLegendParams } from './types';
2
2
 
3
3
  export declare const DEFAULT_LINES_PARAMS: LinesParams;
4
+ export declare const DEFAULT_LINE_AREAS_PARAMS: LineAreasParams;
4
5
  export declare const DEFAULT_DOTS_PARAMS: DotsParams;
5
6
  export declare const DEFAULT_GROUP_AREA_PARAMS: GroupAuxParams;
6
7
  export declare const DEFAULT_BARS_PARAMS: BarsParams;
@@ -1,11 +1,11 @@
1
1
  import { Observable } from 'rxjs';
2
2
  import { ChartParams, DataFormatterGrid, ComputedDataGrid, TransformData, ContainerPosition } from '@orbcharts/core';
3
3
  import * as d3 from 'd3';
4
- export declare const gridSelectionsObservable: ({ selection, pluginName, clipPathID, existedSeriesLabels$, gridContainer$, gridAxesTransform$, gridGraphicTransform$ }: {
4
+ export declare const gridSelectionsObservable: ({ selection, pluginName, clipPathID, existSeriesLabels$, gridContainer$, gridAxesTransform$, gridGraphicTransform$ }: {
5
5
  selection: d3.Selection<any, unknown, any, unknown>;
6
6
  pluginName: string;
7
7
  clipPathID: string;
8
- existedSeriesLabels$: Observable<string[]>;
8
+ existSeriesLabels$: Observable<string[]>;
9
9
  gridContainer$: Observable<ContainerPosition[]>;
10
10
  gridAxesTransform$: Observable<TransformData>;
11
11
  gridGraphicTransform$: Observable<TransformData>;
@@ -1,6 +1,7 @@
1
1
  export * from './defaults';
2
2
  export * from './types';
3
3
  export { Lines } from './plugins/Lines';
4
+ export { LineAreas } from './plugins/LineAreas';
4
5
  export { Bars } from './plugins/Bars';
5
6
  export { BarsDiverging } from './plugins/BarsDiverging';
6
7
  export { BarStack } from './plugins/BarStack';
@@ -0,0 +1 @@
1
+ export declare const LineAreas: import('@orbcharts/core').PluginConstructor<"grid", string, import('..').LineAreasParams>;
@@ -4,6 +4,10 @@ export interface LinesParams {
4
4
  lineCurve: string;
5
5
  lineWidth: number;
6
6
  }
7
+ export interface LineAreasParams {
8
+ lineCurve: string;
9
+ linearGradientOpacity: [number, number];
10
+ }
7
11
  export interface DotsParams {
8
12
  radius: number;
9
13
  fillColorType: ColorType;
@@ -83,4 +87,5 @@ export interface GridLegendParams {
83
87
  listRectWidth: number;
84
88
  listRectHeight: number;
85
89
  listRectRadius: number;
90
+ textColorType: ColorType;
86
91
  }
@@ -26,6 +26,7 @@ export interface MultiGridLegendParams {
26
26
  listRectHeight: number;
27
27
  listRectRadius: number;
28
28
  }>;
29
+ textColorType: ColorType;
29
30
  }
30
31
  export interface MultiGroupAxisParams extends BaseGroupAxisParams {
31
32
  gridIndexes: number[];
@@ -53,4 +53,5 @@ export interface SeriesLegendParams {
53
53
  listRectWidth: number;
54
54
  listRectHeight: number;
55
55
  listRectRadius: number;
56
+ textColorType: ColorType;
56
57
  }
@@ -17,4 +17,5 @@ export interface TreeLegendParams {
17
17
  listRectWidth: number;
18
18
  listRectHeight: number;
19
19
  listRectRadius: number;
20
+ textColorType: ColorType;
20
21
  }
@@ -1,8 +1,13 @@
1
- import { AxisPosition, ColorType, ChartParams, ComputedDatumBase } from '@orbcharts/core';
1
+ import { AxisPosition, ColorType, ChartParams, ComputedDatumBase, ComputedDatumCategoryValue } from '@orbcharts/core';
2
2
 
3
3
  export declare function getMinAndMaxValue(data: ComputedDatumBase[]): [number, number];
4
4
  export declare function getColor(colorType: ColorType, fullChartParams: ChartParams): string;
5
- export declare function getSeriesColor(seriesIndex: number, fullChartParams: ChartParams): string;
5
+ export declare function getSeriesValueColor(): void;
6
+ export declare function getCategoryValueColor({ datum, colorType, fullChartParams }: {
7
+ datum: ComputedDatumCategoryValue;
8
+ colorType: ColorType;
9
+ fullChartParams: ChartParams;
10
+ }): void;
6
11
  export declare function getDatumColor({ datum, colorType, fullChartParams }: {
7
12
  datum: ComputedDatumBase;
8
13
  colorType: ColorType;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orbcharts/plugins-basic",
3
- "version": "3.0.0-alpha.39",
3
+ "version": "3.0.0-alpha.41",
4
4
  "description": "plugins for OrbCharts",
5
5
  "author": "Blue Planet Inc.",
6
6
  "license": "Apache-2.0",
@@ -35,7 +35,7 @@
35
35
  "vite-plugin-dts": "^3.7.3"
36
36
  },
37
37
  "dependencies": {
38
- "@orbcharts/core": "^3.0.0-alpha.37",
38
+ "@orbcharts/core": "^3.0.0-alpha.38",
39
39
  "d3": "^7.8.5",
40
40
  "rxjs": "^7.8.1"
41
41
  }
@@ -32,7 +32,7 @@ interface BaseBarStackContext {
32
32
  selection: d3.Selection<any, unknown, any, unknown>
33
33
  computedData$: Observable<ComputedDataGrid>
34
34
  visibleComputedData$: Observable<ComputedDatumGrid[][]>
35
- existedSeriesLabels$: Observable<string[]>
35
+ existSeriesLabels$: Observable<string[]>
36
36
  SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
37
37
  GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
38
38
  fullParams$: Observable<BaseBarStackParams>
@@ -288,7 +288,7 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
288
288
  selection,
289
289
  computedData$,
290
290
  visibleComputedData$,
291
- existedSeriesLabels$,
291
+ existSeriesLabels$,
292
292
  SeriesDataMap$,
293
293
  GroupDataMap$,
294
294
  fullParams$,
@@ -448,7 +448,7 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
448
448
  selection,
449
449
  pluginName,
450
450
  clipPathID,
451
- existedSeriesLabels$,
451
+ existSeriesLabels$,
452
452
  gridContainer$,
453
453
  gridAxesTransform$,
454
454
  gridGraphicTransform$
@@ -778,6 +778,7 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
778
778
  pluginName,
779
779
  highlightTarget: data.highlightTarget,
780
780
  datum,
781
+ gridIndex: datum.gridIndex,
781
782
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
782
783
  seriesIndex: datum.seriesIndex,
783
784
  seriesLabel: datum.seriesLabel,
@@ -797,6 +798,7 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
797
798
  pluginName,
798
799
  highlightTarget: data.highlightTarget,
799
800
  datum,
801
+ gridIndex: datum.gridIndex,
800
802
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
801
803
  seriesIndex: datum.seriesIndex,
802
804
  seriesLabel: datum.seriesLabel,
@@ -816,6 +818,7 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
816
818
  pluginName,
817
819
  highlightTarget: data.highlightTarget,
818
820
  datum,
821
+ gridIndex: datum.gridIndex,
819
822
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
820
823
  seriesIndex: datum.seriesIndex,
821
824
  seriesLabel: datum.seriesLabel,
@@ -835,6 +838,7 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
835
838
  pluginName,
836
839
  highlightTarget: data.highlightTarget,
837
840
  datum,
841
+ gridIndex: datum.gridIndex,
838
842
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
839
843
  seriesIndex: datum.seriesIndex,
840
844
  seriesLabel: datum.seriesLabel,
@@ -32,7 +32,7 @@ interface BaseBarsContext {
32
32
  selection: d3.Selection<any, unknown, any, unknown>
33
33
  computedData$: Observable<ComputedDataGrid>
34
34
  visibleComputedData$: Observable<ComputedDatumGrid[][]>
35
- existedSeriesLabels$: Observable<string[]>
35
+ existSeriesLabels$: Observable<string[]>
36
36
  SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
37
37
  GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
38
38
  fullParams$: Observable<BaseBarsParams>
@@ -267,7 +267,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
267
267
  selection,
268
268
  computedData$,
269
269
  visibleComputedData$,
270
- existedSeriesLabels$,
270
+ existSeriesLabels$,
271
271
  SeriesDataMap$,
272
272
  GroupDataMap$,
273
273
  fullParams$,
@@ -397,7 +397,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
397
397
  selection,
398
398
  pluginName,
399
399
  clipPathID,
400
- existedSeriesLabels$,
400
+ existSeriesLabels$,
401
401
  gridContainer$,
402
402
  gridAxesTransform$,
403
403
  gridGraphicTransform$
@@ -651,6 +651,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
651
651
  pluginName,
652
652
  highlightTarget: data.highlightTarget,
653
653
  datum,
654
+ gridIndex: datum.gridIndex,
654
655
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
655
656
  seriesIndex: datum.seriesIndex,
656
657
  seriesLabel: datum.seriesLabel,
@@ -670,6 +671,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
670
671
  pluginName,
671
672
  highlightTarget: data.highlightTarget,
672
673
  datum,
674
+ gridIndex: datum.gridIndex,
673
675
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
674
676
  seriesIndex: datum.seriesIndex,
675
677
  seriesLabel: datum.seriesLabel,
@@ -689,6 +691,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
689
691
  pluginName,
690
692
  highlightTarget: data.highlightTarget,
691
693
  datum,
694
+ gridIndex: datum.gridIndex,
692
695
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
693
696
  seriesIndex: datum.seriesIndex,
694
697
  seriesLabel: datum.seriesLabel,
@@ -708,6 +711,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
708
711
  pluginName,
709
712
  highlightTarget: data.highlightTarget,
710
713
  datum,
714
+ gridIndex: datum.gridIndex,
711
715
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
712
716
  seriesIndex: datum.seriesIndex,
713
717
  seriesLabel: datum.seriesLabel,
@@ -31,7 +31,7 @@ interface BaseBarsContext {
31
31
  selection: d3.Selection<any, unknown, any, unknown>
32
32
  computedData$: Observable<ComputedDataGrid>
33
33
  visibleComputedData$: Observable<ComputedDatumGrid[][]>
34
- existedSeriesLabels$: Observable<string[]>
34
+ existSeriesLabels$: Observable<string[]>
35
35
  SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
36
36
  GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
37
37
  fullParams$: Observable<BaseBarsTriangleParams>
@@ -53,7 +53,8 @@ interface RenderBarParams {
53
53
  graphicGSelection: d3.Selection<SVGGElement, unknown, any, any>
54
54
  pathGClassName: string
55
55
  pathClassName: string
56
- barData: BarDatumGrid[][]
56
+ computedData: ComputedDataGrid
57
+ linearGradientIds: string[]
57
58
  zeroYArr: number[]
58
59
  groupLabels: string[]
59
60
  barScale: d3.ScalePoint<string>
@@ -65,9 +66,9 @@ interface RenderBarParams {
65
66
  isSeriesPositionSeprate: boolean
66
67
  }
67
68
 
68
- interface BarDatumGrid extends ComputedDatumGrid {
69
- linearGradientId: string
70
- }
69
+ // interface BarDatumGrid extends ComputedDatumGrid {
70
+ // linearGradientId: string
71
+ // }
71
72
 
72
73
  type ClipPathDatum = {
73
74
  id: string;
@@ -119,7 +120,7 @@ function calctransitionItem (barGroupAmount: number, totalDuration: number) {
119
120
  return totalDuration * (1 - groupDelayProportionOfDuration) // delay後剩餘的時間
120
121
  }
121
122
 
122
- function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName, barData, zeroYArr, groupLabels, barScale, params, chartParams, barWidth, delayGroup, transitionItem, isSeriesPositionSeprate }: RenderBarParams) {
123
+ function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName, computedData, linearGradientIds, zeroYArr, groupLabels, barScale, params, chartParams, barWidth, delayGroup, transitionItem, isSeriesPositionSeprate }: RenderBarParams) {
123
124
 
124
125
  const barHalfWidth = barWidth! / 2
125
126
 
@@ -128,7 +129,7 @@ function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName,
128
129
  // g
129
130
  const gSelection = d3.select(g[seriesIndex])
130
131
  .selectAll<SVGGElement, ComputedDatumGrid>(`g.${pathGClassName}`)
131
- .data(barData[seriesIndex] ?? [])
132
+ .data(computedData[seriesIndex] ?? [])
132
133
  .join(
133
134
  enter => {
134
135
  const enterSelection = enter
@@ -157,7 +158,8 @@ function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName,
157
158
  .attr('height', d => Math.abs(d.axisYFromZero))
158
159
  .attr('y', d => d.axisY < zeroYArr[seriesIndex] ? d.axisY : zeroYArr[seriesIndex])
159
160
  .attr('x', d => isSeriesPositionSeprate ? 0 : barScale(d.seriesLabel)!)
160
- .style('fill', d => `url(#${d.linearGradientId})`)
161
+ // .style('fill', d => `url(#${d.linearGradientId})`)
162
+ .style('fill', d => `url(#${linearGradientIds[d.seriesIndex]})`)
161
163
  .attr('stroke', d => d.color)
162
164
  .attr('transform', d => `translate(${(d ? d.axisX : 0)}, ${0})`)
163
165
  .transition()
@@ -180,14 +182,15 @@ function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName,
180
182
  return graphicBarSelection
181
183
  }
182
184
 
183
- function renderLinearGradient ({ defsSelection, barData, params }: {
185
+ function renderLinearGradient ({ defsSelection, computedData, linearGradientIds, params }: {
184
186
  defsSelection: d3.Selection<SVGDefsElement, any, any, any>
185
- barData: BarDatumGrid[][]
187
+ computedData: ComputedDataGrid
188
+ linearGradientIds: string[]
186
189
  params: BaseBarsTriangleParams
187
190
  }) {
188
191
  defsSelection!
189
192
  .selectAll<SVGLinearGradientElement, ComputedDatumGrid>('linearGradient')
190
- .data(barData ?? [])
193
+ .data(computedData ?? [])
191
194
  .join(
192
195
  enter => {
193
196
  return enter
@@ -202,7 +205,7 @@ function renderLinearGradient ({ defsSelection, barData, params }: {
202
205
  exit => exit.remove()
203
206
  )
204
207
  .attr('id', (d, i) => {
205
- return d[0] ? d[0].linearGradientId : ''
208
+ return d[0] ? linearGradientIds[d[0].seriesIndex] : ''
206
209
  })
207
210
  .html((d, i) => {
208
211
  const color = d[0] ? d[0].color : ''
@@ -286,7 +289,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
286
289
  selection,
287
290
  computedData$,
288
291
  visibleComputedData$,
289
- existedSeriesLabels$,
292
+ existSeriesLabels$,
290
293
  SeriesDataMap$,
291
294
  GroupDataMap$,
292
295
  fullParams$,
@@ -305,107 +308,6 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
305
308
  const pathGClassName = getClassName(pluginName, 'pathG')
306
309
  const pathClassName = getClassName(pluginName, 'path')
307
310
 
308
- // const seriesSelection$ = computedData$.pipe(
309
- // takeUntil(destroy$),
310
- // distinctUntilChanged((a, b) => {
311
- // // 只有當series的數量改變時,才重新計算
312
- // return a.length === b.length
313
- // }),
314
- // map((computedData, i) => {
315
- // return selection
316
- // .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${seriesClassName}`)
317
- // .data(computedData, d => d[0] ? d[0].seriesIndex : i)
318
- // .join(
319
- // enter => {
320
- // return enter
321
- // .append('g')
322
- // .classed(seriesClassName, true)
323
- // .each((d, i, g) => {
324
- // const axesSelection = d3.select(g[i])
325
- // .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${axesClassName}`)
326
- // .data([i])
327
- // .join(
328
- // enter => {
329
- // return enter
330
- // .append('g')
331
- // .classed(axesClassName, true)
332
- // .attr('clip-path', `url(#${clipPathID})`)
333
- // .each((d, i, g) => {
334
- // const defsSelection = d3.select(g[i])
335
- // .selectAll<SVGDefsElement, any>('defs')
336
- // .data([i])
337
- // .join('defs')
338
-
339
- // const graphicGSelection = d3.select(g[i])
340
- // .selectAll<SVGGElement, any>('g')
341
- // .data([i])
342
- // .join('g')
343
- // .classed(graphicClassName, true)
344
- // })
345
- // },
346
- // update => update,
347
- // exit => exit.remove()
348
- // )
349
- // })
350
- // },
351
- // update => update,
352
- // exit => exit.remove()
353
- // )
354
- // })
355
- // )
356
-
357
- // combineLatest({
358
- // seriesSelection: seriesSelection$,
359
- // gridContainer: gridContainer$
360
- // }).pipe(
361
- // takeUntil(destroy$),
362
- // switchMap(async d => d)
363
- // ).subscribe(data => {
364
- // data.seriesSelection
365
- // .transition()
366
- // .attr('transform', (d, i) => {
367
- // const translate = data.gridContainer[i].translate
368
- // const scale = data.gridContainer[i].scale
369
- // return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
370
- // })
371
- // })
372
-
373
-
374
- // const axesSelection$ = combineLatest({
375
- // seriesSelection: seriesSelection$,
376
- // gridAxesTransform: gridAxesTransform$
377
- // }).pipe(
378
- // takeUntil(destroy$),
379
- // switchMap(async d => d),
380
- // map(data => {
381
- // return data.seriesSelection
382
- // .select<SVGGElement>(`g.${axesClassName}`)
383
- // .style('transform', data.gridAxesTransform.value)
384
- // })
385
- // )
386
- // const defsSelection$ = axesSelection$.pipe(
387
- // takeUntil(destroy$),
388
- // map(axesSelection => {
389
- // return axesSelection.select<SVGDefsElement>('defs')
390
- // })
391
- // )
392
- // const graphicGSelection$ = combineLatest({
393
- // axesSelection: axesSelection$,
394
- // gridGraphicTransform: gridGraphicTransform$
395
- // }).pipe(
396
- // takeUntil(destroy$),
397
- // switchMap(async d => d),
398
- // map(data => {
399
- // const graphicGSelection = data.axesSelection
400
- // .select<SVGGElement>(`g.${graphicClassName}`)
401
- // graphicGSelection
402
- // .transition()
403
- // .duration(50)
404
- // .style('transform', data.gridGraphicTransform.value)
405
- // return graphicGSelection
406
- // })
407
- // )
408
-
409
311
  const {
410
312
  seriesSelection$,
411
313
  axesSelection$,
@@ -415,12 +317,21 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
415
317
  selection,
416
318
  pluginName,
417
319
  clipPathID,
418
- existedSeriesLabels$,
320
+ existSeriesLabels$,
419
321
  gridContainer$,
420
322
  gridAxesTransform$,
421
323
  gridGraphicTransform$
422
324
  })
423
325
 
326
+ // valueAxis 的起始座標
327
+ const valueAxisStart$: Observable<number> = gridGraphicTransform$.pipe(
328
+ takeUntil(destroy$),
329
+ map(data => {
330
+ // 抵消掉外層的變型
331
+ return - data.translate[1] / data.scale[1]
332
+ })
333
+ )
334
+
424
335
  const zeroYArr$ = visibleComputedData$.pipe(
425
336
  // map(d => d[0] && d[0][0]
426
337
  // ? d[0][0].axisY - d[0][0].axisYFromZero
@@ -577,29 +488,29 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
577
488
  }))
578
489
  )
579
490
 
580
- const barData$ = combineLatest({
581
- linearGradientIds: linearGradientIds$,
582
- computedData: computedData$
583
- }).pipe(
584
- takeUntil(destroy$),
585
- switchMap(async d => d),
586
- map(data => {
587
- return data.computedData.map((series, seriesIndex) => {
588
- return series.map((_d, _i) => {
589
- return <BarDatumGrid>{
590
- linearGradientId: data.linearGradientIds[seriesIndex],
591
- ..._d
592
- }
593
- })
594
- })
595
- })
596
- )
491
+ // const barData$ = combineLatest({
492
+ // linearGradientIds: linearGradientIds$,
493
+ // computedData: computedData$
494
+ // }).pipe(
495
+ // takeUntil(destroy$),
496
+ // switchMap(async d => d),
497
+ // map(data => {
498
+ // return data.computedData.map((series, seriesIndex) => {
499
+ // return series.map((_d, _i) => {
500
+ // return <BarDatumGrid>{
501
+ // linearGradientId: data.linearGradientIds[seriesIndex],
502
+ // ..._d
503
+ // }
504
+ // })
505
+ // })
506
+ // })
507
+ // )
597
508
 
598
509
  combineLatest({
599
510
  graphicGSelection: graphicGSelection$,
600
511
  defsSelection: defsSelection$,
601
512
  computedData: computedData$,
602
- barData: barData$,
513
+ linearGradientIds: linearGradientIds$,
603
514
  zeroYArr: zeroYArr$,
604
515
  groupLabels: groupLabels$,
605
516
  barScale: barScale$,
@@ -621,7 +532,8 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
621
532
  graphicGSelection: data.graphicGSelection,
622
533
  pathGClassName,
623
534
  pathClassName,
624
- barData: data.barData,
535
+ computedData: data.computedData,
536
+ linearGradientIds: data.linearGradientIds,
625
537
  zeroYArr: data.zeroYArr,
626
538
  groupLabels: data.groupLabels,
627
539
  barScale: data.barScale,
@@ -634,7 +546,8 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
634
546
  })
635
547
  renderLinearGradient({
636
548
  defsSelection: data.defsSelection,
637
- barData: data.barData,
549
+ computedData: data.computedData,
550
+ linearGradientIds: data.linearGradientIds,
638
551
  params: data.params
639
552
  })
640
553
 
@@ -648,6 +561,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
648
561
  pluginName,
649
562
  highlightTarget: data.highlightTarget,
650
563
  datum,
564
+ gridIndex: datum.gridIndex,
651
565
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
652
566
  seriesIndex: datum.seriesIndex,
653
567
  seriesLabel: datum.seriesLabel,
@@ -667,6 +581,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
667
581
  pluginName,
668
582
  highlightTarget: data.highlightTarget,
669
583
  datum,
584
+ gridIndex: datum.gridIndex,
670
585
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
671
586
  seriesIndex: datum.seriesIndex,
672
587
  seriesLabel: datum.seriesLabel,
@@ -686,6 +601,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
686
601
  pluginName,
687
602
  highlightTarget: data.highlightTarget,
688
603
  datum,
604
+ gridIndex: datum.gridIndex,
689
605
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
690
606
  seriesIndex: datum.seriesIndex,
691
607
  seriesLabel: datum.seriesLabel,
@@ -705,6 +621,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
705
621
  pluginName,
706
622
  highlightTarget: data.highlightTarget,
707
623
  datum,
624
+ gridIndex: datum.gridIndex,
708
625
  series: data.SeriesDataMap.get(datum.seriesLabel)!,
709
626
  seriesIndex: datum.seriesIndex,
710
627
  seriesLabel: datum.seriesLabel,