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

package/dist/src/base/BaseBarStack.d.ts

@@ -11,7 +11,7 @@ interface BaseBarStackContext {
     selection: d3.Selection<any, unknown, any, unknown>;
     computedData$: Observable<ComputedDataGrid>;
     visibleComputedData$: Observable<ComputedDatumGrid[][]>;
-    existedSeriesLabels$: Observable<string[]>;
+    existSeriesLabels$: Observable<string[]>;
     SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
     GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
     fullParams$: Observable<BaseBarStackParams>;

package/dist/src/base/BaseBars.d.ts

@@ -12,7 +12,7 @@ interface BaseBarsContext {
     selection: d3.Selection<any, unknown, any, unknown>;
     computedData$: Observable<ComputedDataGrid>;
     visibleComputedData$: Observable<ComputedDatumGrid[][]>;
-    existedSeriesLabels$: Observable<string[]>;
+    existSeriesLabels$: Observable<string[]>;
     SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
     GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
     fullParams$: Observable<BaseBarsParams>;

package/dist/src/base/BaseBarsTriangle.d.ts

@@ -12,7 +12,7 @@ interface BaseBarsContext {
     selection: d3.Selection<any, unknown, any, unknown>;
     computedData$: Observable<ComputedDataGrid>;
     visibleComputedData$: Observable<ComputedDatumGrid[][]>;
-    existedSeriesLabels$: Observable<string[]>;
+    existSeriesLabels$: Observable<string[]>;
     SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
     GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
     fullParams$: Observable<BaseBarsTriangleParams>;

package/dist/src/base/BaseDots.d.ts

@@ -13,7 +13,7 @@ interface BaseDotsContext {
     selection: d3.Selection<any, unknown, any, unknown>;
     computedData$: Observable<ComputedDataGrid>;
     visibleComputedData$: Observable<ComputedDatumGrid[][]>;
-    existedSeriesLabels$: Observable<string[]>;
+    existSeriesLabels$: Observable<string[]>;
     SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
     GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
     fullParams$: Observable<BaseDotsParams>;

package/dist/src/base/BaseLegend.d.ts

@@ -8,6 +8,7 @@ export interface BaseLegendParams {
     padding: number;
     backgroundFill: ColorType;
     backgroundStroke: ColorType;
+    textColorType: ColorType;
     gap: number;
     seriesList: Array<{
         listRectWidth: number;

package/dist/src/base/BaseLineAreas.d.ts

@@ -0,0 +1,30 @@
+import { Observable, Subject } from 'rxjs';
+import { BasePluginFn } from './types';
+import { ComputedDatumGrid, ComputedDataGrid, DataFormatterGrid, EventGrid, ContainerPosition, ChartParams, Layout, TransformData } from '@orbcharts/core';
+import * as d3 from 'd3';
+export interface BaseLineAreasParams {
+    lineCurve: string;
+    linearGradientOpacity: [number, number];
+}
+interface BaseLineAreasContext {
+    selection: d3.Selection<any, unknown, any, unknown>;
+    computedData$: Observable<ComputedDataGrid>;
+    existSeriesLabels$: Observable<string[]>;
+    SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
+    GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
+    fullDataFormatter$: Observable<DataFormatterGrid>;
+    fullParams$: Observable<BaseLineAreasParams>;
+    fullChartParams$: Observable<ChartParams>;
+    gridAxesTransform$: Observable<TransformData>;
+    gridGraphicTransform$: Observable<TransformData>;
+    gridAxesSize$: Observable<{
+        width: number;
+        height: number;
+    }>;
+    gridHighlight$: Observable<string[]>;
+    gridContainer$: Observable<ContainerPosition[]>;
+    layout$: Observable<Layout>;
+    event$: Subject<EventGrid>;
+}
+export declare const createBaseLineAreas: BasePluginFn<BaseLineAreasContext>;
+export {};

package/dist/src/base/BaseLines.d.ts

@@ -9,7 +9,7 @@ export interface BaseLinesParams {
 interface BaseLinesContext {
     selection: d3.Selection<any, unknown, any, unknown>;
     computedData$: Observable<ComputedDataGrid>;
-    existedSeriesLabels$: Observable<string[]>;
+    existSeriesLabels$: Observable<string[]>;
     SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
     GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>;
     fullDataFormatter$: Observable<DataFormatterGrid>;

package/dist/src/grid/defaults.d.ts

@@ -1,6 +1,7 @@
-import { LinesParams, GroupAuxParams, DotsParams, BarsParams, BarStackParams, BarsTriangleParams, GroupAxisParams, ValueAxisParams, ValueStackAxisParams, ScalingAreaParams, GridLegendParams } from './types';
+import { LinesParams, LineAreasParams, GroupAuxParams, DotsParams, BarsParams, BarStackParams, BarsTriangleParams, GroupAxisParams, ValueAxisParams, ValueStackAxisParams, ScalingAreaParams, GridLegendParams } from './types';
 
 export declare const DEFAULT_LINES_PARAMS: LinesParams;
+export declare const DEFAULT_LINE_AREAS_PARAMS: LineAreasParams;
 export declare const DEFAULT_DOTS_PARAMS: DotsParams;
 export declare const DEFAULT_GROUP_AREA_PARAMS: GroupAuxParams;
 export declare const DEFAULT_BARS_PARAMS: BarsParams;

package/dist/src/grid/gridObservables.d.ts

@@ -1,11 +1,11 @@
 import { Observable } from 'rxjs';
 import { ChartParams, DataFormatterGrid, ComputedDataGrid, TransformData, ContainerPosition } from '@orbcharts/core';
 import * as d3 from 'd3';
-export declare const gridSelectionsObservable: ({ selection, pluginName, clipPathID, existedSeriesLabels$, gridContainer$, gridAxesTransform$, gridGraphicTransform$ }: {
+export declare const gridSelectionsObservable: ({ selection, pluginName, clipPathID, existSeriesLabels$, gridContainer$, gridAxesTransform$, gridGraphicTransform$ }: {
     selection: d3.Selection<any, unknown, any, unknown>;
     pluginName: string;
     clipPathID: string;
-    existedSeriesLabels$: Observable<string[]>;
+    existSeriesLabels$: Observable<string[]>;
     gridContainer$: Observable<ContainerPosition[]>;
     gridAxesTransform$: Observable<TransformData>;
     gridGraphicTransform$: Observable<TransformData>;

package/dist/src/grid/index.d.ts

@@ -1,6 +1,7 @@
 export * from './defaults';
 export * from './types';
 export { Lines } from './plugins/Lines';
+export { LineAreas } from './plugins/LineAreas';
 export { Bars } from './plugins/Bars';
 export { BarsDiverging } from './plugins/BarsDiverging';
 export { BarStack } from './plugins/BarStack';

package/dist/src/grid/plugins/LineAreas.d.ts

@@ -0,0 +1 @@
+export declare const LineAreas: import('@orbcharts/core').PluginConstructor<"grid", string, import('..').LineAreasParams>;

package/dist/src/grid/types.d.ts

@@ -4,6 +4,10 @@ export interface LinesParams {
     lineCurve: string;
     lineWidth: number;
 }
+export interface LineAreasParams {
+    lineCurve: string;
+    linearGradientOpacity: [number, number];
+}
 export interface DotsParams {
     radius: number;
     fillColorType: ColorType;
@@ -83,4 +87,5 @@ export interface GridLegendParams {
     listRectWidth: number;
     listRectHeight: number;
     listRectRadius: number;
+    textColorType: ColorType;
 }

package/dist/src/multiGrid/types.d.ts

@@ -26,6 +26,7 @@ export interface MultiGridLegendParams {
         listRectHeight: number;
         listRectRadius: number;
     }>;
+    textColorType: ColorType;
 }
 export interface MultiGroupAxisParams extends BaseGroupAxisParams {
     gridIndexes: number[];

package/dist/src/series/types.d.ts

@@ -53,4 +53,5 @@ export interface SeriesLegendParams {
     listRectWidth: number;
     listRectHeight: number;
     listRectRadius: number;
+    textColorType: ColorType;
 }

package/dist/src/tree/types.d.ts

@@ -17,4 +17,5 @@ export interface TreeLegendParams {
     listRectWidth: number;
     listRectHeight: number;
     listRectRadius: number;
+    textColorType: ColorType;
 }

package/dist/src/utils/orbchartsUtils.d.ts

@@ -1,8 +1,13 @@
-import { AxisPosition, ColorType, ChartParams, ComputedDatumBase } from '@orbcharts/core';
+import { AxisPosition, ColorType, ChartParams, ComputedDatumBase, ComputedDatumCategoryValue } from '@orbcharts/core';
 
 export declare function getMinAndMaxValue(data: ComputedDatumBase[]): [number, number];
 export declare function getColor(colorType: ColorType, fullChartParams: ChartParams): string;
-export declare function getSeriesColor(seriesIndex: number, fullChartParams: ChartParams): string;
+export declare function getSeriesValueColor(): void;
+export declare function getCategoryValueColor({ datum, colorType, fullChartParams }: {
+    datum: ComputedDatumCategoryValue;
+    colorType: ColorType;
+    fullChartParams: ChartParams;
+}): void;
 export declare function getDatumColor({ datum, colorType, fullChartParams }: {
     datum: ComputedDatumBase;
     colorType: ColorType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/plugins-basic",
-  "version": "3.0.0-alpha.39",
+  "version": "3.0.0-alpha.41",
   "description": "plugins for OrbCharts",
   "author": "Blue Planet Inc.",
   "license": "Apache-2.0",
@@ -35,7 +35,7 @@
     "vite-plugin-dts": "^3.7.3"
   },
   "dependencies": {
-    "@orbcharts/core": "^3.0.0-alpha.37",
+    "@orbcharts/core": "^3.0.0-alpha.38",
     "d3": "^7.8.5",
     "rxjs": "^7.8.1"
   }

package/src/base/BaseBarStack.ts

@@ -32,7 +32,7 @@ interface BaseBarStackContext {
   selection: d3.Selection<any, unknown, any, unknown>
   computedData$: Observable<ComputedDataGrid>
   visibleComputedData$: Observable<ComputedDatumGrid[][]>
-  existedSeriesLabels$: Observable<string[]>
+  existSeriesLabels$: Observable<string[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   fullParams$: Observable<BaseBarStackParams>
@@ -288,7 +288,7 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
   selection,
   computedData$,
   visibleComputedData$,
-  existedSeriesLabels$,
+  existSeriesLabels$,
   SeriesDataMap$,
   GroupDataMap$,
   fullParams$,
@@ -448,7 +448,7 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
     selection,
     pluginName,
     clipPathID,
-    existedSeriesLabels$,
+    existSeriesLabels$,
     gridContainer$,
     gridAxesTransform$,
     gridGraphicTransform$
@@ -778,6 +778,7 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
           pluginName,
           highlightTarget: data.highlightTarget,
           datum,
+          gridIndex: datum.gridIndex,
           series: data.SeriesDataMap.get(datum.seriesLabel)!,
           seriesIndex: datum.seriesIndex,
           seriesLabel: datum.seriesLabel,
@@ -797,6 +798,7 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
           pluginName,
           highlightTarget: data.highlightTarget,
           datum,
+          gridIndex: datum.gridIndex,
           series: data.SeriesDataMap.get(datum.seriesLabel)!,
           seriesIndex: datum.seriesIndex,
           seriesLabel: datum.seriesLabel,
@@ -816,6 +818,7 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
           pluginName,
           highlightTarget: data.highlightTarget,
           datum,
+          gridIndex: datum.gridIndex,
           series: data.SeriesDataMap.get(datum.seriesLabel)!,
           seriesIndex: datum.seriesIndex,
           seriesLabel: datum.seriesLabel,
@@ -835,6 +838,7 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
           pluginName,
           highlightTarget: data.highlightTarget,
           datum,
+          gridIndex: datum.gridIndex,
           series: data.SeriesDataMap.get(datum.seriesLabel)!,
           seriesIndex: datum.seriesIndex,
           seriesLabel: datum.seriesLabel,

package/src/base/BaseBars.ts

@@ -32,7 +32,7 @@ interface BaseBarsContext {
   selection: d3.Selection<any, unknown, any, unknown>
   computedData$: Observable<ComputedDataGrid>
   visibleComputedData$: Observable<ComputedDatumGrid[][]>
-  existedSeriesLabels$: Observable<string[]>
+  existSeriesLabels$: Observable<string[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   fullParams$: Observable<BaseBarsParams>
@@ -267,7 +267,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
   selection,
   computedData$,
   visibleComputedData$,
-  existedSeriesLabels$,
+  existSeriesLabels$,
   SeriesDataMap$,
   GroupDataMap$,
   fullParams$,
@@ -397,7 +397,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
     selection,
     pluginName,
     clipPathID,
-    existedSeriesLabels$,
+    existSeriesLabels$,
     gridContainer$,
     gridAxesTransform$,
     gridGraphicTransform$
@@ -651,6 +651,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
           pluginName,
           highlightTarget: data.highlightTarget,
           datum,
+          gridIndex: datum.gridIndex,
           series: data.SeriesDataMap.get(datum.seriesLabel)!,
           seriesIndex: datum.seriesIndex,
           seriesLabel: datum.seriesLabel,
@@ -670,6 +671,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
           pluginName,
           highlightTarget: data.highlightTarget,
           datum,
+          gridIndex: datum.gridIndex,
           series: data.SeriesDataMap.get(datum.seriesLabel)!,
           seriesIndex: datum.seriesIndex,
           seriesLabel: datum.seriesLabel,
@@ -689,6 +691,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
           pluginName,
           highlightTarget: data.highlightTarget,
           datum,
+          gridIndex: datum.gridIndex,
           series: data.SeriesDataMap.get(datum.seriesLabel)!,
           seriesIndex: datum.seriesIndex,
           seriesLabel: datum.seriesLabel,
@@ -708,6 +711,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
           pluginName,
           highlightTarget: data.highlightTarget,
           datum,
+          gridIndex: datum.gridIndex,
           series: data.SeriesDataMap.get(datum.seriesLabel)!,
           seriesIndex: datum.seriesIndex,
           seriesLabel: datum.seriesLabel,

package/src/base/BaseBarsTriangle.ts

@@ -31,7 +31,7 @@ interface BaseBarsContext {
   selection: d3.Selection<any, unknown, any, unknown>
   computedData$: Observable<ComputedDataGrid>
   visibleComputedData$: Observable<ComputedDatumGrid[][]>
-  existedSeriesLabels$: Observable<string[]>
+  existSeriesLabels$: Observable<string[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   fullParams$: Observable<BaseBarsTriangleParams>
@@ -53,7 +53,8 @@ interface RenderBarParams {
   graphicGSelection: d3.Selection<SVGGElement, unknown, any, any>
   pathGClassName: string
   pathClassName: string
-  barData: BarDatumGrid[][]
+  computedData: ComputedDataGrid
+  linearGradientIds: string[]
   zeroYArr: number[]
   groupLabels: string[]
   barScale: d3.ScalePoint<string>
@@ -65,9 +66,9 @@ interface RenderBarParams {
   isSeriesPositionSeprate: boolean
 }
 
-interface BarDatumGrid extends ComputedDatumGrid {
-  linearGradientId: string
-}
+// interface BarDatumGrid extends ComputedDatumGrid {
+//   linearGradientId: string
+// }
 
 type ClipPathDatum = {
   id: string;
@@ -119,7 +120,7 @@ function calctransitionItem (barGroupAmount: number, totalDuration: number) {
   return totalDuration * (1 - groupDelayProportionOfDuration) // delay後剩餘的時間
 }
 
-function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName, barData, zeroYArr, groupLabels, barScale, params, chartParams, barWidth, delayGroup, transitionItem, isSeriesPositionSeprate }: RenderBarParams) {
+function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName, computedData, linearGradientIds, zeroYArr, groupLabels, barScale, params, chartParams, barWidth, delayGroup, transitionItem, isSeriesPositionSeprate }: RenderBarParams) {
   
   const barHalfWidth = barWidth! / 2
 
@@ -128,7 +129,7 @@ function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName,
       // g
       const gSelection = d3.select(g[seriesIndex])
         .selectAll<SVGGElement, ComputedDatumGrid>(`g.${pathGClassName}`)
-        .data(barData[seriesIndex] ?? [])
+        .data(computedData[seriesIndex] ?? [])
         .join(
           enter => {
             const enterSelection = enter
@@ -157,7 +158,8 @@ function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName,
         .attr('height', d => Math.abs(d.axisYFromZero))
         .attr('y', d => d.axisY < zeroYArr[seriesIndex] ? d.axisY : zeroYArr[seriesIndex])
         .attr('x', d => isSeriesPositionSeprate ? 0 : barScale(d.seriesLabel)!)
-        .style('fill', d => `url(#${d.linearGradientId})`)
+        // .style('fill', d => `url(#${d.linearGradientId})`)
+        .style('fill', d => `url(#${linearGradientIds[d.seriesIndex]})`)
         .attr('stroke', d => d.color)
         .attr('transform', d => `translate(${(d ? d.axisX : 0)}, ${0})`)
         .transition()
@@ -180,14 +182,15 @@ function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName,
   return graphicBarSelection
 }
 
-function renderLinearGradient ({ defsSelection, barData, params }: {
+function renderLinearGradient ({ defsSelection, computedData, linearGradientIds, params }: {
   defsSelection: d3.Selection<SVGDefsElement, any, any, any>
-  barData: BarDatumGrid[][]
+  computedData: ComputedDataGrid
+  linearGradientIds: string[]
   params: BaseBarsTriangleParams
 }) {
   defsSelection!
     .selectAll<SVGLinearGradientElement, ComputedDatumGrid>('linearGradient')
-    .data(barData ?? [])
+    .data(computedData ?? [])
     .join(
       enter => {
         return enter
@@ -202,7 +205,7 @@ function renderLinearGradient ({ defsSelection, barData, params }: {
       exit => exit.remove()
     )
     .attr('id', (d, i) => {
-      return d[0] ? d[0].linearGradientId : ''
+      return d[0] ? linearGradientIds[d[0].seriesIndex] : ''
     })
     .html((d, i) => {
       const color = d[0] ? d[0].color : ''
@@ -286,7 +289,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
   selection,
   computedData$,
   visibleComputedData$,
-  existedSeriesLabels$,
+  existSeriesLabels$,
   SeriesDataMap$,
   GroupDataMap$,
   fullParams$,
@@ -305,107 +308,6 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
   const pathGClassName = getClassName(pluginName, 'pathG')
   const pathClassName = getClassName(pluginName, 'path')
 
-  // const seriesSelection$ = computedData$.pipe(
-  //   takeUntil(destroy$),
-  //   distinctUntilChanged((a, b) => {
-  //     // 只有當series的數量改變時，才重新計算
-  //     return a.length === b.length
-  //   }),
-  //   map((computedData, i) => {
-  //     return selection
-  //       .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${seriesClassName}`)
-  //       .data(computedData, d => d[0] ? d[0].seriesIndex : i)
-  //       .join(
-  //         enter => {
-  //           return enter
-  //             .append('g')
-  //             .classed(seriesClassName, true)
-  //             .each((d, i, g) => {
-  //               const axesSelection = d3.select(g[i])
-  //                 .selectAll<SVGGElement, ComputedDatumGrid[]>(`g.${axesClassName}`)
-  //                 .data([i])
-  //                 .join(
-  //                   enter => {
-  //                     return enter
-  //                       .append('g')
-  //                       .classed(axesClassName, true)
-  //                       .attr('clip-path', `url(#${clipPathID})`)
-  //                       .each((d, i, g) => {
-  //                         const defsSelection = d3.select(g[i])
-  //                           .selectAll<SVGDefsElement, any>('defs')
-  //                           .data([i])
-  //                           .join('defs')
-            
-  //                         const graphicGSelection = d3.select(g[i])
-  //                           .selectAll<SVGGElement, any>('g')
-  //                           .data([i])
-  //                           .join('g')
-  //                           .classed(graphicClassName, true)
-  //                       })
-  //                   },
-  //                   update => update,
-  //                   exit => exit.remove()
-  //                 )
-  //             })
-  //         },
-  //         update => update,
-  //         exit => exit.remove()
-  //       )
-  //   })
-  // )
-
-  // combineLatest({
-  //   seriesSelection: seriesSelection$,
-  //   gridContainer: gridContainer$                                                                                                                                                                                       
-  // }).pipe(
-  //   takeUntil(destroy$),
-  //   switchMap(async d => d)
-  // ).subscribe(data => {
-  //   data.seriesSelection
-  //     .transition()
-  //     .attr('transform', (d, i) => {
-  //       const translate = data.gridContainer[i].translate
-  //       const scale = data.gridContainer[i].scale
-  //       return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
-  //     })
-  // })
-
-
-  // const axesSelection$ = combineLatest({
-  //   seriesSelection: seriesSelection$,
-  //   gridAxesTransform: gridAxesTransform$
-  // }).pipe(
-  //   takeUntil(destroy$),
-  //   switchMap(async d => d),
-  //   map(data => {
-  //     return data.seriesSelection
-  //       .select<SVGGElement>(`g.${axesClassName}`)
-  //       .style('transform', data.gridAxesTransform.value)
-  //   })
-  // )
-  // const defsSelection$ = axesSelection$.pipe(
-  //   takeUntil(destroy$),
-  //   map(axesSelection => {
-  //     return axesSelection.select<SVGDefsElement>('defs')
-  //   })
-  // )
-  // const graphicGSelection$ = combineLatest({
-  //   axesSelection: axesSelection$,
-  //   gridGraphicTransform: gridGraphicTransform$
-  // }).pipe(
-  //   takeUntil(destroy$),
-  //   switchMap(async d => d),
-  //   map(data => {
-  //     const graphicGSelection = data.axesSelection
-  //       .select<SVGGElement>(`g.${graphicClassName}`)
-  //     graphicGSelection
-  //       .transition()
-  //       .duration(50)
-  //       .style('transform', data.gridGraphicTransform.value)
-  //     return graphicGSelection
-  //   })
-  // )
-
   const { 
     seriesSelection$,
     axesSelection$,
@@ -415,12 +317,21 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
     selection,
     pluginName,
     clipPathID,
-    existedSeriesLabels$,
+    existSeriesLabels$,
     gridContainer$,
     gridAxesTransform$,
     gridGraphicTransform$
   })
 
+  // valueAxis 的起始座標
+  const valueAxisStart$: Observable<number> = gridGraphicTransform$.pipe(
+    takeUntil(destroy$),
+    map(data => {
+      // 抵消掉外層的變型
+      return - data.translate[1] / data.scale[1]
+    })
+  )
+
   const zeroYArr$ = visibleComputedData$.pipe(
     // map(d => d[0] && d[0][0]
     //   ? d[0][0].axisY - d[0][0].axisYFromZero
@@ -577,29 +488,29 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
     }))
   )
 
-  const barData$ = combineLatest({
-    linearGradientIds: linearGradientIds$,
-    computedData: computedData$
-  }).pipe(
-    takeUntil(destroy$),
-    switchMap(async d => d),
-    map(data => {
-      return data.computedData.map((series, seriesIndex) => {
-        return series.map((_d, _i) => {
-          return <BarDatumGrid>{
-            linearGradientId: data.linearGradientIds[seriesIndex],
-            ..._d
-          }
-        })
-      })
-    })
-  )
+  // const barData$ = combineLatest({
+  //   linearGradientIds: linearGradientIds$,
+  //   computedData: computedData$
+  // }).pipe(
+  //   takeUntil(destroy$),
+  //   switchMap(async d => d),
+  //   map(data => {
+  //     return data.computedData.map((series, seriesIndex) => {
+  //       return series.map((_d, _i) => {
+  //         return <BarDatumGrid>{
+  //           linearGradientId: data.linearGradientIds[seriesIndex],
+  //           ..._d
+  //         }
+  //       })
+  //     })
+  //   })
+  // )
 
   combineLatest({
     graphicGSelection: graphicGSelection$,
     defsSelection: defsSelection$,
     computedData: computedData$,
-    barData: barData$,
+    linearGradientIds: linearGradientIds$,
     zeroYArr: zeroYArr$,
     groupLabels: groupLabels$,
     barScale: barScale$,
@@ -621,7 +532,8 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
       graphicGSelection: data.graphicGSelection,
       pathGClassName,
       pathClassName,
-      barData: data.barData,
+      computedData: data.computedData,
+      linearGradientIds: data.linearGradientIds,
       zeroYArr: data.zeroYArr,
       groupLabels: data.groupLabels,
       barScale: data.barScale,
@@ -634,7 +546,8 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
     })
     renderLinearGradient({
       defsSelection: data.defsSelection,
-      barData: data.barData,
+      computedData: data.computedData,
+      linearGradientIds: data.linearGradientIds,
       params: data.params
     })
 
@@ -648,6 +561,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
           pluginName,
           highlightTarget: data.highlightTarget,
           datum,
+          gridIndex: datum.gridIndex,
           series: data.SeriesDataMap.get(datum.seriesLabel)!,
           seriesIndex: datum.seriesIndex,
           seriesLabel: datum.seriesLabel,
@@ -667,6 +581,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
           pluginName,
           highlightTarget: data.highlightTarget,
           datum,
+          gridIndex: datum.gridIndex,
           series: data.SeriesDataMap.get(datum.seriesLabel)!,
           seriesIndex: datum.seriesIndex,
           seriesLabel: datum.seriesLabel,
@@ -686,6 +601,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
           pluginName,
           highlightTarget: data.highlightTarget,
           datum,
+          gridIndex: datum.gridIndex,
           series: data.SeriesDataMap.get(datum.seriesLabel)!,
           seriesIndex: datum.seriesIndex,
           seriesLabel: datum.seriesLabel,
@@ -705,6 +621,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
           pluginName,
           highlightTarget: data.highlightTarget,
           datum,
+          gridIndex: datum.gridIndex,
           series: data.SeriesDataMap.get(datum.seriesLabel)!,
           seriesIndex: datum.seriesIndex,
           seriesLabel: datum.seriesLabel,