@orbcharts/plugins-basic 3.0.0-beta.15 → 3.0.0-beta.16

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,

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

package/src/base/BaseGroupAxis.ts

@@ -234,6 +234,7 @@ function renderAxis ({ selection, xAxisClassName, fullParams, tickTextAlign, gri
   const xAxisEl = xAxisSelection
     .transition()
     .duration(100)
+    .ease(d3.easeLinear) // 線性的 - 當托曳或快速變動的時候比較滑順
     .call(xAxis)
     .on('end', (self, t) => {
       // 先等transition結束再處理文字，否則會被原本的文字覆蓋
@@ -257,6 +258,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
         })

package/src/base/BaseLines.ts

@@ -13,7 +13,7 @@ import type {
   ComputedDatumGrid,
   ComputedDataGrid,
   ComputedLayoutDatumGrid,
-  ComputedLayoutDataGrid,
+  ComputedAxesDataGrid,
   DataFormatterGrid,
   EventGrid,
   ContainerPositionScaled,
@@ -42,9 +42,9 @@ import { gridSelectionsObservable } from '../grid/gridObservables'
 interface BaseLinesContext {
   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[]>>
@@ -230,9 +230,9 @@ function renderClipPath ({ defsSelection, clipPathData, transitionDuration, tran
 export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: string, {
   selection,
   computedData$,
-  computedLayoutData$,
+  computedAxesData$,
   visibleComputedData$,
-  visibleComputedLayoutData$,
+  visibleComputedAxesData$,
   seriesLabels$,
   SeriesDataMap$,
   GroupDataMap$,
@@ -515,7 +515,7 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
   
   const pathSelectionArr$ = combineLatest({
     graphicGSelection: graphicGSelection$,
-    visibleComputedLayoutData: visibleComputedLayoutData$,
+    visibleComputedAxesData: visibleComputedAxesData$,
     linePath: linePath$,
     params: fullParams$,
   }).pipe(
@@ -536,7 +536,7 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
       // 繪圖
       data.graphicGSelection.each((d, i, all) => {
         // 將資料分段
-        const segmentData = makeSegmentData(data.visibleComputedLayoutData[i] ?? [])
+        const segmentData = makeSegmentData(data.visibleComputedAxesData[i] ?? [])
 
         pathSelectionArr[i] = renderLines({
           selection: d3.select(all[i]),