@orbcharts/plugins-basic 3.0.0-beta.9 → 3.0.1

package/dist/src/multiValue/plugins/XZoom.d.ts

@@ -0,0 +1 @@
+export declare const XZoom: import('@orbcharts/core-types/dist/src/types/Plugin').PluginConstructor<"multiValue", "XZoom", import('@orbcharts/plugins-basic-types').XZoomParams>;

package/dist/src/relationship/plugins/ForceDirected.d.ts

@@ -0,0 +1,3 @@
+import { ForceDirectedParams } from '../../../lib/plugins-basic-types';
+
+export declare const ForceDirected: import('@orbcharts/core-types/dist/src/types/Plugin').PluginConstructor<"relationship", "ForceDirected", ForceDirectedParams>;

package/dist/src/relationship/plugins/ForceDirectedBubbles.d.ts

@@ -0,0 +1,3 @@
+import { ForceDirectedBubblesParams } from '../../../lib/plugins-basic-types';
+
+export declare const ForceDirectedBubbles: import('@orbcharts/core-types/dist/src/types/Plugin').PluginConstructor<"relationship", "ForceDirectedBubbles", ForceDirectedBubblesParams>;

package/dist/src/relationship/plugins/RelationshipLegend.d.ts

@@ -0,0 +1 @@
+export declare const RelationshipLegend: import('@orbcharts/core-types/dist/src/types/Plugin').PluginConstructor<"relationship", "RelationshipLegend", import('@orbcharts/plugins-basic-types').RelationshipLegendParams>;

package/dist/src/relationship/plugins/RelationshipTooltip.d.ts

@@ -0,0 +1 @@
+export declare const RelationshipTooltip: import('@orbcharts/core-types/dist/src/types/Plugin').PluginConstructor<"relationship", "RelationshipTooltip", import('@orbcharts/plugins-basic-types').RelationshipTooltipParams>;

package/dist/src/series/plugins/Bubbles.d.ts

@@ -0,0 +1,3 @@
+import { BubblesParams } from '../../../lib/plugins-basic-types';
+
+export declare const Bubbles: import('@orbcharts/core-types/dist/src/types/Plugin').PluginConstructor<"series", "Bubbles", BubblesParams>;

package/dist/src/series/plugins/Pie.d.ts

@@ -0,0 +1,3 @@
+import { PieParams } from '../../../lib/plugins-basic-types';
+
+export declare const Pie: import('@orbcharts/core-types/dist/src/types/Plugin').PluginConstructor<"series", "Pie", PieParams>;

package/dist/src/series/plugins/PieEventTexts.d.ts

@@ -0,0 +1,3 @@
+import { PieEventTextsParams } from '../../../lib/plugins-basic-types';
+
+export declare const PieEventTexts: import('@orbcharts/core-types/dist/src/types/Plugin').PluginConstructor<"series", "PieEventTexts", PieEventTextsParams>;

package/dist/src/series/plugins/PieLabels.d.ts

@@ -0,0 +1,3 @@
+import { PieLabelsParams } from '../../../lib/plugins-basic-types';
+
+export declare const PieLabels: import('@orbcharts/core-types/dist/src/types/Plugin').PluginConstructor<"series", "PieLabels", PieLabelsParams>;

package/dist/{orbcharts-plugins-basic/src → src}/series/plugins/Rose.d.ts

@@ -7,4 +7,4 @@ export interface PieDatum extends D3PieDatum {
     id: string;
     prevValue: number;
 }
-export declare const Rose: import('../../../lib/core-types').PluginConstructor<"series", "Rose", RoseParams>;
+export declare const Rose: import('@orbcharts/core-types/dist/src/types/Plugin').PluginConstructor<"series", "Rose", RoseParams>;

package/dist/src/series/plugins/RoseLabels.d.ts

@@ -0,0 +1,3 @@
+import { RoseLabelsParams } from '../../../lib/plugins-basic-types';
+
+export declare const RoseLabels: import('@orbcharts/core-types/dist/src/types/Plugin').PluginConstructor<"series", "RoseLabels", RoseLabelsParams>;

package/dist/src/series/plugins/SeriesLegend.d.ts

@@ -0,0 +1 @@
+export declare const SeriesLegend: import('@orbcharts/core-types/dist/src/types/Plugin').PluginConstructor<"series", "SeriesLegend", import('@orbcharts/plugins-basic-types').SeriesLegendParams>;

package/dist/src/series/plugins/SeriesTooltip.d.ts

@@ -0,0 +1 @@
+export declare const SeriesTooltip: import('@orbcharts/core-types/dist/src/types/Plugin').PluginConstructor<"series", "SeriesTooltip", import('@orbcharts/plugins-basic-types').SeriesTooltipParams>;

package/dist/src/tree/plugins/TreeLegend.d.ts

@@ -0,0 +1 @@
+export declare const TreeLegend: import('@orbcharts/core-types/dist/src/types/Plugin').PluginConstructor<"tree", "TreeLegend", import('@orbcharts/plugins-basic-types').TreeLegendParams>;

package/dist/src/tree/plugins/TreeMap.d.ts

@@ -0,0 +1,3 @@
+import { TreeMapParams } from '../../../lib/plugins-basic-types';
+
+export declare const TreeMap: import('@orbcharts/core-types/dist/src/types/Plugin').PluginConstructor<"tree", "TreeMap", TreeMapParams>;

package/dist/src/tree/plugins/TreeTooltip.d.ts

@@ -0,0 +1 @@
+export declare const TreeTooltip: import('@orbcharts/core-types/dist/src/types/Plugin').PluginConstructor<"tree", "TreeTooltip", import('@orbcharts/plugins-basic-types').TreeTooltipParams>;

package/dist/{orbcharts-plugins-basic/src → src}/utils/commonUtils.d.ts

@@ -1,2 +1,3 @@
 export declare function measureTextWidth(text: string, size?: number): number;
 export declare function getMinMax(data: number[]): [number, number];
+export declare function toCurrency(num: number | null): string;

package/dist/{orbcharts-plugins-basic/src → src}/utils/d3Graphics.d.ts

@@ -10,10 +10,11 @@ type Line = {
     text: string;
 };
 export declare function renderCircleText(selection: d3.Selection<any, any, any, any>, { text, radius, lineHeight, isBreakAll, limit }: RenderCircleTextParams): d3.Selection<SVGTSpanElement, Line, SVGTextElement, any> | undefined;
-export declare function renderTspansOnAxis(textSelection: d3.Selection<d3.BaseType, unknown, null, undefined>, { textArr, textSizePx, groupAxisPosition }: {
+export declare function renderTspansOnAxis(textSelection: d3.Selection<d3.BaseType, unknown, null, undefined>, { textArr, textSizePx, groupAxisPosition, isContainerRotated }: {
     textArr: string[];
     textSizePx: number;
     groupAxisPosition: 'top' | 'right' | 'bottom' | 'left';
+    isContainerRotated: boolean;
 }): void;
 export declare function renderTspansOnQuadrant(textSelection: d3.Selection<d3.BaseType, unknown, null, undefined>, { textArr, textSizePx, quadrant }: {
     textArr: string[];

package/dist/{orbcharts-plugins-basic/src → src}/utils/d3Utils.d.ts

@@ -11,3 +11,4 @@ export declare function makeD3Arc({ axisWidth, innerRadius, outerRadius, padAngl
 }): d3.Arc<any, d3.DefaultArcObject>;
 export declare const parseTickFormatValue: (value: any, tickFormat: string | ((text: d3.NumberValue) => string | d3.NumberValue)) => string;
 export declare const parseDateTickFormatValue: (value: any, tickFormat: string | ((text: d3.NumberValue) => string | d3.NumberValue)) => string;
+export declare function isLightColor(color: string): boolean;

package/lib/core.ts

@@ -3,4 +3,4 @@
 export * from '@orbcharts/core'
 
 // test
-// export * from '../../orbcharts-core/src'
+// export * from '../../orbcharts-core'

package/lib/plugins-basic-types.ts

@@ -1,6 +1,6 @@
 
-// export * from '@orbcharts/plugins-basic-types'
+export * from '@orbcharts/plugins-basic-types'
 
 // test
-export * from '../../orbcharts-plugins-basic-types/src'
+// export * from '../../orbcharts-plugins-basic-types/src'
 

package/package.json

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

package/src/base/BaseBars.ts

@@ -12,7 +12,7 @@ import type { BasePluginFn } from './types'
 import type {
   ComputedDatumGrid,
   ComputedDataGrid,
-  ComputedLayoutDataGrid,
+  ComputedAxesDataGrid,
   DataFormatterTypeMap,
   ContainerPositionScaled,
   EventGrid,
@@ -35,9 +35,9 @@ import { gridSelectionsObservable } from '../grid/gridObservables'
 interface BaseBarsContext {
   selection: d3.Selection<any, unknown, any, unknown>
   computedData$: Observable<ComputedDataGrid>
-  computedLayoutData$: Observable<ComputedLayoutDataGrid>
+  computedAxesData$: Observable<ComputedAxesDataGrid>
   visibleComputedData$: Observable<ComputedDatumGrid[][]>
-  visibleComputedLayoutData$: Observable<ComputedLayoutDataGrid>
+  visibleComputedAxesData$: Observable<ComputedAxesDataGrid>
   seriesLabels$: Observable<string[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
@@ -59,7 +59,7 @@ interface BaseBarsContext {
 interface RenderBarParams {
   graphicGSelection: d3.Selection<SVGGElement, string, any, any>
   rectClassName: string
-  visibleComputedLayoutData: ComputedLayoutDataGrid
+  visibleComputedAxesData: ComputedAxesDataGrid
   zeroYArr: number[]
   groupLabels: string[]
   barScale: d3.ScalePoint<string>
@@ -124,7 +124,7 @@ function calctransitionItem (barGroupAmount: number, totalDuration: number) {
 }
 // let _data: ComputedDatumGrid[][] = []
 
-function renderRectBars ({ graphicGSelection, rectClassName, visibleComputedLayoutData, zeroYArr, groupLabels, barScale, params, chartParams, barWidth, transformedBarRadius, delayGroup, transitionItem, isSeriesSeprate }: RenderBarParams) {
+function renderRectBars ({ graphicGSelection, rectClassName, visibleComputedAxesData, zeroYArr, groupLabels, barScale, params, chartParams, barWidth, transformedBarRadius, delayGroup, transitionItem, isSeriesSeprate }: RenderBarParams) {
 
   const barHalfWidth = barWidth! / 2
 
@@ -132,7 +132,7 @@ function renderRectBars ({ graphicGSelection, rectClassName, visibleComputedLayo
     .each((seriesData, seriesIndex, g) => {
       d3.select(g[seriesIndex])
         .selectAll<SVGGElement, ComputedDatumGrid>(`rect.${rectClassName}`)
-        .data(visibleComputedLayoutData[seriesIndex] ?? [], d => d.id)
+        .data(visibleComputedAxesData[seriesIndex] ?? [], d => d.id)
         .join(
           enter => {
             // console.log('enter')
@@ -274,9 +274,9 @@ function highlight ({ selection, ids, fullChartParams }: {
 export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string, {
   selection,
   computedData$,
-  computedLayoutData$,
+  computedAxesData$,
   visibleComputedData$,
-  visibleComputedLayoutData$,
+  visibleComputedAxesData$,
   seriesLabels$,
   SeriesDataMap$,
   GroupDataMap$,
@@ -413,7 +413,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
     gridGraphicTransform$
   })
 
-  const zeroYArr$ = visibleComputedLayoutData$.pipe(
+  const zeroYArr$ = visibleComputedAxesData$.pipe(
     takeUntil(destroy$),
     map(data => {
       return data.map(d => {
@@ -613,7 +613,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
 
   const barSelection$ = combineLatest({
     graphicGSelection: graphicGSelection$,
-    visibleComputedLayoutData: visibleComputedLayoutData$,
+    visibleComputedAxesData: visibleComputedAxesData$,
     // barData$: barData$,
     zeroYArr: zeroYArr$,
     groupLabels: groupLabels$,
@@ -633,7 +633,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
       return renderRectBars({
         graphicGSelection: data.graphicGSelection,
         rectClassName,
-        visibleComputedLayoutData: data.visibleComputedLayoutData,
+        visibleComputedAxesData: data.visibleComputedAxesData,
         zeroYArr: data.zeroYArr,
         groupLabels: data.groupLabels,
         barScale: data.barScale,
@@ -672,7 +672,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
           series: data.SeriesDataMap.get(datum.seriesLabel)!,
           seriesIndex: datum.seriesIndex,
           seriesLabel: datum.seriesLabel,
-          groups: data.GroupDataMap.get(datum.groupLabel)!,
+          group: data.GroupDataMap.get(datum.groupLabel)!,
           groupIndex: datum.groupIndex,
           groupLabel: datum.groupLabel,
           event,
@@ -692,7 +692,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
           series: data.SeriesDataMap.get(datum.seriesLabel)!,
           seriesIndex: datum.seriesIndex,
           seriesLabel: datum.seriesLabel,
-          groups: data.GroupDataMap.get(datum.groupLabel)!,
+          group: data.GroupDataMap.get(datum.groupLabel)!,
           groupIndex: datum.groupIndex,
           groupLabel: datum.groupLabel,
           event,
@@ -712,7 +712,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
           series: data.SeriesDataMap.get(datum.seriesLabel)!,
           seriesIndex: datum.seriesIndex,
           seriesLabel: datum.seriesLabel,
-          groups: data.GroupDataMap.get(datum.groupLabel)!,
+          group: data.GroupDataMap.get(datum.groupLabel)!,
           groupIndex: datum.groupIndex,
           groupLabel: datum.groupLabel,
           event,
@@ -732,7 +732,7 @@ export const createBaseBars: BasePluginFn<BaseBarsContext> = (pluginName: string
           series: data.SeriesDataMap.get(datum.seriesLabel)!,
           seriesIndex: datum.seriesIndex,
           seriesLabel: datum.seriesLabel,
-          groups: data.GroupDataMap.get(datum.groupLabel)!,
+          group: data.GroupDataMap.get(datum.groupLabel)!,
           groupIndex: datum.groupIndex,
           groupLabel: datum.groupLabel,
           event,

package/src/base/BaseBarsTriangle.ts

@@ -13,7 +13,7 @@ import type {
   ComputedDatumGrid,
   ComputedDataGrid,
   ComputedLayoutDatumGrid,
-  ComputedLayoutDataGrid,
+  ComputedAxesDataGrid,
   DataFormatterTypeMap,
   EventGrid,
   ChartParams,
@@ -36,9 +36,9 @@ import { gridSelectionsObservable } from '../grid/gridObservables'
 interface BaseBarsContext {
   selection: d3.Selection<any, unknown, any, unknown>
   computedData$: Observable<ComputedDataGrid>
-  computedLayoutData$: Observable<ComputedLayoutDataGrid>
+  computedAxesData$: Observable<ComputedAxesDataGrid>
   visibleComputedData$: Observable<ComputedDatumGrid[][]>
-  visibleComputedLayoutData$: Observable<ComputedLayoutDataGrid>
+  visibleComputedAxesData$: Observable<ComputedAxesDataGrid>
   fullDataFormatter$: Observable<DataFormatterTypeMap<'grid'>>
   seriesLabels$: Observable<string[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
@@ -62,7 +62,7 @@ interface RenderBarParams {
   graphicGSelection: d3.Selection<SVGGElement, unknown, any, any>
   pathGClassName: string
   pathClassName: string
-  visibleComputedLayoutData: ComputedLayoutDataGrid
+  visibleComputedAxesData: ComputedAxesDataGrid
   linearGradientIds: string[]
   zeroYArr: number[]
   groupLabels: string[]
@@ -131,7 +131,7 @@ function calctransitionItem (barGroupAmount: number, totalDuration: number) {
   return totalDuration * (1 - groupDelayProportionOfDuration) // delay後剩餘的時間
 }
 
-function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName, visibleComputedLayoutData, linearGradientIds, zeroYArr, groupLabels, barScale, params, chartParams, barWidth, delayGroup, transitionItem, isSeriesSeprate }: RenderBarParams) {
+function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName, visibleComputedAxesData, linearGradientIds, zeroYArr, groupLabels, barScale, params, chartParams, barWidth, delayGroup, transitionItem, isSeriesSeprate }: RenderBarParams) {
   
   const barHalfWidth = barWidth! / 2
 
@@ -140,7 +140,7 @@ function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName,
       // g
       const gSelection = d3.select(g[seriesIndex])
         .selectAll<SVGGElement, ComputedDatumGrid>(`g.${pathGClassName}`)
-        .data(visibleComputedLayoutData[seriesIndex] ?? [])
+        .data(visibleComputedAxesData[seriesIndex] ?? [])
         .join(
           enter => {
             const enterSelection = enter
@@ -299,9 +299,9 @@ function highlight ({ selection, ids, fullChartParams }: {
 export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName: string, {
   selection,
   computedData$,
-  computedLayoutData$,
+  computedAxesData$,
   visibleComputedData$,
-  visibleComputedLayoutData$,
+  visibleComputedAxesData$,
   fullDataFormatter$,
   seriesLabels$,
   SeriesDataMap$,
@@ -346,7 +346,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
     })
   )
 
-  const zeroYArr$ = visibleComputedLayoutData$.pipe(
+  const zeroYArr$ = visibleComputedAxesData$.pipe(
     // map(d => d[0] && d[0][0]
     //   ? d[0][0].axisY - d[0][0].axisYFromZero
     //   : 0),
@@ -522,7 +522,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
     graphicGSelection: graphicGSelection$,
     defsSelection: defsSelection$,
     computedData: computedData$,
-    visibleComputedLayoutData: visibleComputedLayoutData$,
+    visibleComputedAxesData: visibleComputedAxesData$,
     linearGradientIds: linearGradientIds$,
     zeroYArr: zeroYArr$,
     groupLabels: groupLabels$,
@@ -548,7 +548,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
         graphicGSelection: data.graphicGSelection,
         pathGClassName,
         pathClassName,
-        visibleComputedLayoutData: data.visibleComputedLayoutData,
+        visibleComputedAxesData: data.visibleComputedAxesData,
         linearGradientIds: data.linearGradientIds,
         zeroYArr: data.zeroYArr,
         groupLabels: data.groupLabels,
@@ -585,7 +585,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
           series: data.SeriesDataMap.get(datum.seriesLabel)!,
           seriesIndex: datum.seriesIndex,
           seriesLabel: datum.seriesLabel,
-          groups: data.GroupDataMap.get(datum.groupLabel)!,
+          group: data.GroupDataMap.get(datum.groupLabel)!,
           groupIndex: datum.groupIndex,
           groupLabel: datum.groupLabel,
           event,
@@ -605,7 +605,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
           series: data.SeriesDataMap.get(datum.seriesLabel)!,
           seriesIndex: datum.seriesIndex,
           seriesLabel: datum.seriesLabel,
-          groups: data.GroupDataMap.get(datum.groupLabel)!,
+          group: data.GroupDataMap.get(datum.groupLabel)!,
           groupIndex: datum.groupIndex,
           groupLabel: datum.groupLabel,
           event,
@@ -625,7 +625,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
           series: data.SeriesDataMap.get(datum.seriesLabel)!,
           seriesIndex: datum.seriesIndex,
           seriesLabel: datum.seriesLabel,
-          groups: data.GroupDataMap.get(datum.groupLabel)!,
+          group: data.GroupDataMap.get(datum.groupLabel)!,
           groupIndex: datum.groupIndex,
           groupLabel: datum.groupLabel,
           event,
@@ -645,7 +645,7 @@ export const createBaseBarsTriangle: BasePluginFn<BaseBarsContext> = (pluginName
           series: data.SeriesDataMap.get(datum.seriesLabel)!,
           seriesIndex: datum.seriesIndex,
           seriesLabel: datum.seriesLabel,
-          groups: data.GroupDataMap.get(datum.groupLabel)!,
+          group: data.GroupDataMap.get(datum.groupLabel)!,
           groupIndex: datum.groupIndex,
           groupLabel: datum.groupLabel,
           event,

package/src/base/BaseDots.ts

@@ -11,7 +11,7 @@ import type { BasePluginFn } from './types'
 import type {
   ComputedDatumGrid,
   ComputedDataGrid,
-  ComputedLayoutDataGrid,
+  ComputedAxesDataGrid,
   EventGrid,
   ChartParams, 
   ContainerPositionScaled,
@@ -35,9 +35,9 @@ import { gridSelectionsObservable } from '../grid/gridObservables'
 interface BaseDotsContext {
   selection: d3.Selection<any, unknown, any, unknown>
   computedData$: Observable<ComputedDataGrid>
-  computedLayoutData$: Observable<ComputedLayoutDataGrid>
+  computedAxesData$: Observable<ComputedAxesDataGrid>
   visibleComputedData$: Observable<ComputedDatumGrid[][]>
-  visibleComputedLayoutData$: Observable<ComputedLayoutDataGrid>
+  visibleComputedAxesData$: Observable<ComputedAxesDataGrid>
   seriesLabels$: Observable<string[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
@@ -68,11 +68,11 @@ type ClipPathDatum = {
 // const circleGClassName = getClassName(pluginName, 'circleG')
 // const circleClassName = getClassName(pluginName, 'circle')
 
-function renderDots ({ graphicGSelection, circleGClassName, circleClassName, visibleComputedLayoutData, fullParams, fullChartParams, graphicReverseScale }: {
+function renderDots ({ graphicGSelection, circleGClassName, circleClassName, visibleComputedAxesData, fullParams, fullChartParams, graphicReverseScale }: {
   graphicGSelection: d3.Selection<SVGGElement, any, any, any>
   circleGClassName: string
   circleClassName: string
-  visibleComputedLayoutData: ComputedLayoutDataGrid
+  visibleComputedAxesData: ComputedAxesDataGrid
   fullParams: BaseDotsParams
   fullChartParams: ChartParams
   graphicReverseScale: [number, number][]
@@ -89,7 +89,7 @@ function renderDots ({ graphicGSelection, circleGClassName, circleClassName, vis
     .each((seriesData, seriesIndex, g) => {
       d3.select(g[seriesIndex])
         .selectAll<SVGGElement, ComputedDatumGrid>('g')
-        .data(visibleComputedLayoutData[seriesIndex], d => d.id)
+        .data(visibleComputedAxesData[seriesIndex], d => d.id)
         .join(
           enter => {
             // enterDuration
@@ -222,9 +222,9 @@ function renderClipPath ({ defsSelection, clipPathData }: {
 export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string, {
   selection,
   computedData$,
-  computedLayoutData$,
+  computedAxesData$,
   visibleComputedData$,
-  visibleComputedLayoutData$,
+  visibleComputedAxesData$,
   seriesLabels$,
   SeriesDataMap$,
   GroupDataMap$,
@@ -310,7 +310,7 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
   
   const graphicSelection$ = combineLatest({
     graphicGSelection: graphicGSelection$,
-    visibleComputedLayoutData: visibleComputedLayoutData$,
+    visibleComputedAxesData: visibleComputedAxesData$,
     graphicReverseScale: graphicReverseScale$,
     fullChartParams: fullChartParams$,
     fullParams: fullParams$,
@@ -322,7 +322,7 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
         graphicGSelection: data.graphicGSelection,
         circleGClassName,
         circleClassName,
-        visibleComputedLayoutData: data.visibleComputedLayoutData,
+        visibleComputedAxesData: data.visibleComputedAxesData,
         fullParams: data.fullParams,
         fullChartParams: data.fullChartParams,
         graphicReverseScale: data.graphicReverseScale
@@ -355,7 +355,7 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
           series: data.SeriesDataMap.get(datum.seriesLabel)!,
           seriesIndex: datum.seriesIndex,
           seriesLabel: datum.seriesLabel,
-          groups: data.GroupDataMap.get(datum.groupLabel)!,
+          group: data.GroupDataMap.get(datum.groupLabel)!,
           groupIndex: datum.groupIndex,
           groupLabel: datum.groupLabel,
           event,
@@ -376,7 +376,7 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
           series: data.SeriesDataMap.get(datum.seriesLabel)!,
           seriesIndex: datum.seriesIndex,
           seriesLabel: datum.seriesLabel,
-          groups: data.GroupDataMap.get(datum.groupLabel)!,
+          group: data.GroupDataMap.get(datum.groupLabel)!,
           groupIndex: datum.groupIndex,
           groupLabel: datum.groupLabel,
           event
@@ -395,7 +395,7 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
           series: data.SeriesDataMap.get(datum.seriesLabel)!,
           seriesIndex: datum.seriesIndex,
           seriesLabel: datum.seriesLabel,
-          groups: data.GroupDataMap.get(datum.groupLabel)!,
+          group: data.GroupDataMap.get(datum.groupLabel)!,
           groupIndex: datum.groupIndex,
           groupLabel: datum.groupLabel,
           event,
@@ -415,7 +415,7 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
           series: data.SeriesDataMap.get(datum.seriesLabel)!,
           seriesIndex: datum.seriesIndex,
           seriesLabel: datum.seriesLabel,
-          groups: data.GroupDataMap.get(datum.groupLabel)!,
+          group: data.GroupDataMap.get(datum.groupLabel)!,
           groupIndex: datum.groupIndex,
           groupLabel: datum.groupLabel,
           event,

package/src/base/BaseGroupAxis.ts

@@ -204,15 +204,23 @@ function renderAxis ({ selection, xAxisClassName, fullParams, tickTextAlign, gri
     tickPadding = 0
     textX = fullParams.tickPadding
   } else if (fullDataFormatter.groupAxis.position === 'bottom') {
-    tickPadding = fullParams.tickPadding
+    if (fullParams.tickFullLine == true) {
+      tickPadding = - fullParams.tickPadding
+    } else {
+      tickPadding = - fullParams.tickPadding - defaultTickSize
+    }
     textX = 0
   } else if (fullDataFormatter.groupAxis.position === 'top') {
-    tickPadding = - fullParams.tickPadding
+    if (fullParams.tickFullLine == true) {
+      tickPadding = fullParams.tickPadding
+    } else {
+      tickPadding = fullParams.tickPadding - defaultTickSize
+    }
     textX = - 0
   }
 
   // 設定X軸刻度
-  const xAxis = d3.axisBottom(groupScale)
+  const xAxis = d3.axisTop(groupScale)
     .scale(groupScale)
     .ticks(fullParams.ticks === 'all'
       ? allTicksAmount
@@ -220,8 +228,8 @@ function renderAxis ({ selection, xAxisClassName, fullParams, tickTextAlign, gri
         ? allTicksAmount // 不顯示超過groupLabels數量的刻度
         : fullParams.ticks)
     .tickSize(fullParams.tickFullLine == true
-      ? gridAxesSize.height
-      : - defaultTickSize)
+      ? - gridAxesSize.height
+      : defaultTickSize)
     .tickSizeOuter(0)
     .tickFormat((groupIndex: number) => {
       // 用index對應到groupLabel
@@ -234,7 +242,9 @@ function renderAxis ({ selection, xAxisClassName, fullParams, tickTextAlign, gri
   const xAxisEl = xAxisSelection
     .transition()
     .duration(100)
+    .ease(d3.easeLinear) // 線性的 - 當托曳或快速變動的時候比較滑順
     .call(xAxis)
+    
     .on('end', (self, t) => {
       // 先等transition結束再處理文字，否則會被原本的文字覆蓋
       xAxisSelection
@@ -248,7 +258,8 @@ function renderAxis ({ selection, xAxisClassName, fullParams, tickTextAlign, gri
           renderTspansOnAxis(d3.select(n[i]), {
             textArr,
             textSizePx,
-            groupAxisPosition: fullDataFormatter.groupAxis.position
+            groupAxisPosition: fullDataFormatter.groupAxis.position,
+            isContainerRotated: true
           })
         })
     })
@@ -257,6 +268,7 @@ function renderAxis ({ selection, xAxisClassName, fullParams, tickTextAlign, gri
     .style('fill', 'none')
     .style('stroke', fullParams.tickLineVisible == true ? getColor(fullParams.tickColorType, chartParams) : 'none')
     .style('stroke-dasharray', fullParams.tickFullLineDasharray)
+    .style('vector-effect', 'non-scaling-stroke') // 避免 scale 導致線條變形
     .attr('pointer-events', 'none')
 
   xAxisEl.selectAll('path')

package/src/base/BaseLineAreas.ts

@@ -13,7 +13,7 @@ import type {
   ComputedDatumGrid,
   ComputedDataGrid,
   ComputedLayoutDatumGrid,
-  ComputedLayoutDataGrid,
+  ComputedAxesDataGrid,
   DataFormatterGrid,
   EventGrid,
   ContainerPositionScaled,
@@ -36,9 +36,9 @@ import { gridSelectionsObservable } from '../grid/gridObservables'
 interface BaseLineAreasContext {
   selection: d3.Selection<any, unknown, any, unknown>
   computedData$: Observable<ComputedDataGrid>
-  computedLayoutData$: Observable<ComputedLayoutDataGrid>
+  computedAxesData$: Observable<ComputedAxesDataGrid>
   visibleComputedData$: Observable<ComputedDatumGrid[][]>
-  visibleComputedLayoutData$: Observable<ComputedLayoutDataGrid>
+  visibleComputedAxesData$: Observable<ComputedAxesDataGrid>
   seriesLabels$: Observable<string[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
@@ -262,9 +262,9 @@ function renderClipPath ({ defsSelection, clipPathData, transitionDuration, tran
 export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginName: string, {
   selection,
   computedData$,
-  computedLayoutData$,
+  computedAxesData$,
   visibleComputedData$,
-  visibleComputedLayoutData$,
+  visibleComputedAxesData$,
   seriesLabels$,
   SeriesDataMap$,
   GroupDataMap$,
@@ -431,7 +431,7 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
   const pathSelectionArr$ = combineLatest({
     graphicGSelection: graphicGSelection$,
     defsSelection: defsSelection$,
-    visibleComputedLayoutData: visibleComputedLayoutData$,
+    visibleComputedAxesData: visibleComputedAxesData$,
     linearGradientIds: linearGradientIds$,
     areaPath: areaPath$,
     params: fullParams$,
@@ -453,7 +453,7 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
       // 繪圖
       data.graphicGSelection.each((d, i, all) => {
         // 將資料分段
-        const segmentData = makeSegmentData(data.visibleComputedLayoutData[i] ?? [])
+        const segmentData = makeSegmentData(data.visibleComputedAxesData[i] ?? [])
 
         pathSelectionArr[i] = renderLineAreas({
           selection: d3.select(all[i]),
@@ -465,7 +465,7 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
         })
         renderLinearGradient({
           defsSelection: data.defsSelection,
-          computedData: data.visibleComputedLayoutData,
+          computedData: data.visibleComputedAxesData,
           linearGradientIds: data.linearGradientIds,
           params: data.params
         })
@@ -507,7 +507,7 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
             series: data.SeriesDataMap.get(_datum.seriesLabel)!,
             seriesIndex: _datum.seriesIndex,
             seriesLabel: _datum.seriesLabel,
-            groups: data.GroupDataMap.get(_datum.groupLabel)!,
+            group: data.GroupDataMap.get(_datum.groupLabel)!,
             groupIndex: _datum.groupIndex,
             groupLabel: _datum.groupLabel,
             event,
@@ -533,7 +533,7 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
             series: data.SeriesDataMap.get(_datum.seriesLabel)!,
             seriesIndex: _datum.seriesIndex,
             seriesLabel: _datum.seriesLabel,
-            groups: data.GroupDataMap.get(_datum.groupLabel)!,
+            group: data.GroupDataMap.get(_datum.groupLabel)!,
             groupIndex: _datum.groupIndex,
             groupLabel: _datum.groupLabel,
             event,
@@ -559,7 +559,7 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
             series: data.SeriesDataMap.get(_datum.seriesLabel)!,
             seriesIndex: _datum.seriesIndex,
             seriesLabel: _datum.seriesLabel,
-            groups: data.GroupDataMap.get(_datum.groupLabel)!,
+            group: data.GroupDataMap.get(_datum.groupLabel)!,
             groupIndex: _datum.groupIndex,
             groupLabel: _datum.groupLabel,
             event,
@@ -585,7 +585,7 @@ export const createBaseLineAreas: BasePluginFn<BaseLineAreasContext> = (pluginNa
             series: data.SeriesDataMap.get(_datum.seriesLabel)!,
             seriesIndex: _datum.seriesIndex,
             seriesLabel: _datum.seriesLabel,
-            groups: data.GroupDataMap.get(_datum.groupLabel)!,
+            group: data.GroupDataMap.get(_datum.groupLabel)!,
             groupIndex: _datum.groupIndex,
             groupLabel: _datum.groupLabel,
             event,