@orbcharts/core 3.0.0-alpha.58 → 3.0.0-alpha.60

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

@@ -23,13 +23,13 @@ export interface DataFormatterBase<T extends ChartType> {
 export type DataFormatterBasePartial<T extends ChartType> = Partial<DataFormatterBase<T>>;
 export interface DataFormatterValueAxis {
     position: AxisPosition;
-    scaleDomain: [number | 'auto', number | 'auto'];
+    scaleDomain: [number | 'min' | 'auto', number | 'max' | 'auto'];
     scaleRange: [number, number];
     label: string;
 }
 export interface DataFormatterGroupAxis {
     position: AxisPosition;
-    scaleDomain: [number | 'auto', number | 'auto'];
+    scaleDomain: [number, number | 'max'];
     scalePadding: number;
     label: string;
 }

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

@@ -3,7 +3,7 @@ export declare const createAxisLinearScale: ({ maxValue, minValue, axisWidth, sc
     maxValue: number;
     minValue: number;
     axisWidth: number;
-    scaleDomain: [number | "auto", number | "auto"];
+    scaleDomain: [number | "min" | "auto", number | "max" | "auto"];
     scaleRange: [number, number];
 }) => d3.ScaleLinear<number, number, never>;
 export declare const createAxisPointScale: ({ axisLabels, axisWidth, padding }: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/core",
-  "version": "3.0.0-alpha.58",
+  "version": "3.0.0-alpha.60",
   "description": "OrbCharts is an open source chart library based on d3.js and rx.js",
   "author": "Blue Planet Inc.",
   "license": "Apache-2.0",

package/src/base/createBaseChart.ts

@@ -212,8 +212,25 @@ export const createBaseChart: CreateBaseChart = <T extends ChartType>({ defaultD
     })
 
     // 監聽外層的element尺寸
-    const rootSize$ = resizeObservable(element)
-      .pipe(
+    const rootSize$: Observable<{ width: number; height: number }> = of({
+      width: options?.width ?? CHART_OPTIONS_DEFAULT.width,
+      height: options?.height ?? CHART_OPTIONS_DEFAULT.height
+    }).pipe(
+        switchMap(size => {
+          return iif(
+            () => size.width === 'auto' || size.height === 'auto',
+            // 有 'auto' 的話就監聽element的尺寸
+            resizeObservable(element).pipe(
+              map((d) => {
+                return {
+                  width: size.width === 'auto' ? d.width : size.width,
+                  height: size.height === 'auto' ? d.height : size.height
+                }
+              })
+            ),
+            of(size as { width: number; height: number })
+          )
+        }),
         takeUntil(destroy$),
         share()
       )

package/src/defaults.ts

@@ -99,14 +99,14 @@ export const DATA_RELATIONA_DEFAULTL: DataRelationship = {
 
 export const DATA_FORMATTER_VALUE_AXIS_DEFAULT: DataFormatterValueAxis = {
   position: 'left',
-  scaleDomain: [0, 'auto'],
+  scaleDomain: ['auto', 'auto'],
   scaleRange: [0, 0.9],
   label: '',
 }
 
 export const DATA_FORMATTER_GROUP_AXIS_DEFAULT: DataFormatterGroupAxis = {
   position: 'bottom',
-  scaleDomain: [0, 'auto'],
+  scaleDomain: [0, 'max'],
   scalePadding: 0.5,
   label: ''
 }

package/src/grid/gridObservables.ts

@@ -278,10 +278,11 @@ export const gridGraphicTransformObservable = ({ computedData$, fullDataFormatte
       : height
     const groupMin = 0
     const groupMax = data[0] ? data[0].length - 1 : 0
-    const groupScaleDomainMin = groupAxis.scaleDomain[0] === 'auto'
-      ? groupMin - groupAxis.scalePadding
-      : groupAxis.scaleDomain[0] as number - groupAxis.scalePadding
-    const groupScaleDomainMax = groupAxis.scaleDomain[1] === 'auto'
+    // const groupScaleDomainMin = groupAxis.scaleDomain[0] === 'min'
+    //   ? groupMin - groupAxis.scalePadding
+    //   : groupAxis.scaleDomain[0] as number - groupAxis.scalePadding
+    const groupScaleDomainMin = groupAxis.scaleDomain[0] - groupAxis.scalePadding
+    const groupScaleDomainMax = groupAxis.scaleDomain[1] === 'max'
       ? groupMax + groupAxis.scalePadding
       : groupAxis.scaleDomain[1] as number + groupAxis.scalePadding
     

package/src/multiValue/computeMultiValueData.ts

@@ -83,12 +83,48 @@ export const computeMultiValueData: ComputedDataFn<'multiValue'> = (context) =>
     })
 
     const _xScaleDoamin: [number, number] = [
-      dataFormatter.xAxis.scaleDomain[0] === 'auto' ? xMinValue : dataFormatter.xAxis.scaleDomain[0],
-      dataFormatter.xAxis.scaleDomain[1] === 'auto' ? xMaxValue : dataFormatter.xAxis.scaleDomain[1]
+      // dataFormatter.xAxis.scaleDomain[0] === 'auto' ? xMinValue : dataFormatter.xAxis.scaleDomain[0],
+      (() => {
+        if (dataFormatter.xAxis.scaleDomain[0] === 'auto') {
+          return xMinValue < 0 ? xMinValue : 0
+        } else if (dataFormatter.xAxis.scaleDomain[0] === 'min') {
+          return xMinValue
+        } else {
+          return dataFormatter.xAxis.scaleDomain[0]
+        }
+      })(),
+      // dataFormatter.xAxis.scaleDomain[1] === 'auto' ? xMaxValue : dataFormatter.xAxis.scaleDomain[1]
+      (() => {
+        if (dataFormatter.xAxis.scaleDomain[1] === 'auto') {
+          return xMaxValue >= 0 ? xMaxValue : 0
+        } else if (dataFormatter.xAxis.scaleDomain[1] === 'max') {
+          return xMaxValue
+        } else {
+          return dataFormatter.xAxis.scaleDomain[1]
+        }
+      })()
     ]
     const _yScaleDoamin: [number, number] = [
-      dataFormatter.yAxis.scaleDomain[0] === 'auto' ? yMinValue : dataFormatter.yAxis.scaleDomain[0],
-      dataFormatter.yAxis.scaleDomain[1] === 'auto' ? yMaxValue : dataFormatter.yAxis.scaleDomain[1]
+      // dataFormatter.yAxis.scaleDomain[0] === 'auto' ? yMinValue : dataFormatter.yAxis.scaleDomain[0],
+      (() => {
+        if (dataFormatter.yAxis.scaleDomain[0] === 'auto') {
+          return xMinValue < 0 ? xMinValue : 0
+        } else if (dataFormatter.yAxis.scaleDomain[0] === 'min') {
+          return xMinValue
+        } else {
+          return dataFormatter.yAxis.scaleDomain[0]
+        }
+      })(),
+      // dataFormatter.yAxis.scaleDomain[1] === 'auto' ? yMaxValue : dataFormatter.yAxis.scaleDomain[1]
+      (() => {
+        if (dataFormatter.yAxis.scaleDomain[1] === 'auto') {
+          return xMaxValue >= 0 ? xMaxValue : 0
+        } else if (dataFormatter.yAxis.scaleDomain[1] === 'max') {
+          return xMaxValue
+        } else {
+          return dataFormatter.yAxis.scaleDomain[1]
+        }
+      })()
     ]
     
     // // 篩選顯示狀態

package/src/types/Chart.ts

@@ -27,10 +27,14 @@ export interface ChartEntity<T extends ChartType> extends ContextSubject<T> {
 
 export interface ChartOptions<T extends ChartType> {
   preset: Preset<T, unknown>
+  width: number | 'auto'
+  height: number | 'auto'
 }
 
 export interface ChartOptionsPartial<T extends ChartType> {
   preset?: Preset<T, unknown>
+  width?: number | 'auto'
+  height?: number | 'auto'
 }
 
 export interface Preset<T extends ChartType, AllPluginParams> {

package/src/types/DataFormatter.ts

@@ -47,14 +47,14 @@ export type DataFormatterBasePartial<T extends ChartType> = Partial<DataFormatte
 
 export interface DataFormatterValueAxis {
   position: AxisPosition
-  scaleDomain: [number | 'auto', number | 'auto']
+  scaleDomain: [number | 'min' | 'auto', number | 'max' | 'auto']
   scaleRange: [number, number]
   label: string
 }
 
 export interface DataFormatterGroupAxis {
   position: AxisPosition
-  scaleDomain: [number | 'auto', number | 'auto']
+  scaleDomain: [number, number | 'max']
   scalePadding: number
   label: string
 }

package/src/utils/d3Utils.ts

@@ -12,19 +12,35 @@ export const createAxisLinearScale = ({
   maxValue: number
   minValue: number
   axisWidth: number
-  scaleDomain: [number | 'auto', number | 'auto']
+  scaleDomain: [number | 'min' | 'auto', number | 'max' | 'auto']
   scaleRange: [number, number] // 0-1
 }) => {
   // -- 無值補上預設值 --
-  const domainMin: number | 'auto' = scaleDomain[0] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleDomain[0]
-  const domainMax: number | 'auto' = scaleDomain[1] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleDomain[1]
+  const domainMin: number | 'min' | 'auto' = scaleDomain[0] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleDomain[0]
+  const domainMax: number | 'max' | 'auto' = scaleDomain[1] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleDomain[1]
   const rangeMin: number = scaleRange[0] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleRange[0]
   const rangeMax: number = scaleRange[1] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleRange[1]
 
-  // -- 'auto'提換成實際值 --
-  const domainMinValue = domainMin === 'auto' ? minValue : domainMin
-  const domainMaxValue = domainMax === 'auto' ? maxValue : domainMax
+  // -- 'auto' | 'max' | 'min' 替換成實際值 --
+  let domainMinValue: number = (() => {
+    if (domainMin === 'auto') {
+      return minValue < 0 ? minValue : 0
+    } else if (domainMin === 'min') {
+      return minValue
+    } else {
+      return domainMin
+    }
+  })()
   
+  let domainMaxValue: number = (() => {
+    if (domainMax === 'auto') {
+      return maxValue >= 0 ? maxValue : 0
+    } else if (domainMax === 'max') {
+      return maxValue
+    } else {
+      return domainMax
+    }
+  })()
   // let rangeMinValue = axisWidth * rangeMin
   // let rangeMaxValue = axisWidth * rangeMax
 

package/src/utils/observables.ts

@@ -54,7 +54,8 @@ export const highlightObservable = <T extends ChartType, D>({ datumList$, fullCh
   // 事件觸發的highlight
   const highlightMouseover$ = event$.pipe(
     takeUntil(destroy$),
-    filter(d => d.eventName === 'mouseover' || d.eventName === 'mousemove'),
+    // filter(d => d.eventName === 'mouseover' || d.eventName === 'mousemove'),
+    filter(d => d.eventName === 'mouseover'),
     // distinctUntilChanged((prev, current) => prev.eventName === current.eventName)
     map(d => {
       return d.datum