@orbcharts/core 3.0.0-beta.3 → 3.0.0-beta.4

package/src/utils/validator.ts

@@ -1,126 +1,127 @@
-import type {
-  ValidatorResult,
-  ToBeTypes,
-  ToBeOption,
-  ValidatorRuleToBeTypes,
-  ValidatorRuleToBe,
-  ValidatorRuleToBeOption,
-  ValidatorRule
-} from '../../lib/core-types'
-import { isFunction, isPlainObject } from './commonUtils'
-import { createValidatorErrorMessage } from './errorMessage'
-
-
-
-// let test: ValidatorRule = {
-//   name: {
-//     toBeTypes: ['string']
-//   },
-//   labels: {
-//     toBe: 'string | "auto"',
-//     test: (value: any) => {
-//       return value === 'auto' || typeof value === 'string'
-//     }
-//   }
-// }
-
-function getInvalidColumn<T> (data: T, rules: Partial<ValidatorRule<T>>) {
-  // "toBeTypes" 的測試
-  const testType: {[key in ToBeTypes]: (value: any) => boolean} = {
-    string: (value: any) => typeof value === 'string',
-    number: (value: any) => typeof value === 'number',
-    boolean: (value: any) => typeof value === 'boolean',
-    object: (value: any) => isPlainObject(value), // 嚴格判斷是否為純物件
-    'object[]': (value: any) => Array.isArray(value) && value.every((v: any) => isPlainObject(v)),
-    'string[]': (value: any) => Array.isArray(value) && value.every((v: any) => typeof v === 'string'),
-    'number[]': (value: any) => Array.isArray(value) && value.every((v: any) => typeof v === 'number'),
-    Function: (value: any) => isFunction(value),
-    null: (value: any) => value === null,
-    undefined: (value: any) => value === undefined
-  }
-  // "toBeOption" 的測試
-  const testOption: {[key in ToBeOption]: (value: any) => boolean} = {
-    ColorType: (value: any) => {
-      return value === 'none'
-        || value === 'series'
-        || value === 'primary'
-        || value === 'secondary'
-        || value === 'white'
-        || value === 'background'
-    }
-  }
-
-  const failColumn = Object.keys(data).find((columnName: string) => {
-    // 有定義規則
-    if (rules[columnName as keyof T]) {
-      const rule: ValidatorRuleToBeTypes | ValidatorRuleToBe | ValidatorRuleToBeOption = rules[columnName as keyof T]
-      const value = data[columnName as keyof T]
-      // 測試 "toBeTypes"
-      if ((rule as ValidatorRuleToBeTypes).toBeTypes) {
-        const toBeTypes = (rule as ValidatorRuleToBeTypes).toBeTypes
-        const isCorrect = toBeTypes.some((toBeType) => testType[toBeType](value))
-        if (isCorrect === false) {
-          return true
-        }
-      }
-      // 測試 "toBe"
-      else if ((rule as ValidatorRuleToBe).toBe) {
-        const { toBe, test } = rule as ValidatorRuleToBe
-        const isCorrect = test(value)
-        if (isCorrect === false) {
-          return true
-        }
-      }
-      // 測試 "toBeOption"
-      else if ((rule as ValidatorRuleToBeOption).toBeOption) {
-        const toBeOption = (rule as ValidatorRuleToBeOption).toBeOption
-        const isCorrect = testOption[toBeOption](value)
-        if (isCorrect === false) {
-          return true
-        }
-      }
-    }
-    return false
-  })
-
-  return failColumn
-}
-
-export function validateColumns<T> (data: T, rules: Partial<ValidatorRule<T>>): ValidatorResult {
-  // if (data === undefined || data === null) {
-  //   // orbcharts所有的options都是允許空值的
-  //   return {
-  //     status: 'success',
-  //     columnName: '',
-  //     expectToBe: '',
-  //   }
-  // }
-  const invalidColumn = getInvalidColumn(data, rules)
-  if (invalidColumn) {
-    const rule = rules[invalidColumn as keyof T]
-    const expectToBe = (rule as ValidatorRuleToBeTypes).toBeTypes
-      ? (rule as ValidatorRuleToBeTypes).toBeTypes.join(' | ')
-      : (rule as ValidatorRuleToBe).toBe
-        ? (rule as ValidatorRuleToBe).toBe
-        : (rule as ValidatorRuleToBeOption).toBeOption
-          ? (rule as ValidatorRuleToBeOption).toBeOption
-          : ''
-
-    return {
-      status: 'error',
-      // message: createValidatorErrorMessage({
-      //   columnName: failColumn,
-      //   expect,
-      //   from
-      // })
-      columnName: invalidColumn as string,
-      expectToBe: expectToBe,
-    }
-  } else {
-    return {
-      status: 'success',
-      columnName: '',
-      expectToBe: '',
-    }
-  }
+import type {
+  ColorType,
+  ValidatorResult,
+  ToBeTypes,
+  ToBeOption,
+  ValidatorRuleToBeTypes,
+  ValidatorRuleToBe,
+  ValidatorRuleToBeOption,
+  ValidatorRule
+} from '../../lib/core-types'
+import { isFunction, isPlainObject } from './commonUtils'
+import { createValidatorErrorMessage } from './errorMessage'
+
+
+
+// let test: ValidatorRule = {
+//   name: {
+//     toBeTypes: ['string']
+//   },
+//   labels: {
+//     toBe: 'string | "auto"',
+//     test: (value: any) => {
+//       return value === 'auto' || typeof value === 'string'
+//     }
+//   }
+// }
+
+function getInvalidColumn<T> (data: T, rules: Partial<ValidatorRule<T>>) {
+  // "toBeTypes" 的測試
+  const testType: {[key in ToBeTypes]: (value: any) => boolean} = {
+    string: (value: any) => typeof value === 'string',
+    number: (value: any) => typeof value === 'number',
+    boolean: (value: any) => typeof value === 'boolean',
+    object: (value: any) => isPlainObject(value), // 嚴格判斷是否為純物件
+    'object[]': (value: any) => Array.isArray(value) && value.every((v: any) => isPlainObject(v)),
+    'string[]': (value: any) => Array.isArray(value) && value.every((v: any) => typeof v === 'string'),
+    'number[]': (value: any) => Array.isArray(value) && value.every((v: any) => typeof v === 'number'),
+    Function: (value: any) => isFunction(value),
+    null: (value: any) => value === null,
+    undefined: (value: any) => value === undefined
+  }
+  // "toBeOption" 的測試
+  const testOption: {[key in ToBeOption]: (value: any) => boolean} = {
+    ColorType: (value: ColorType) => {
+      return value === 'none'
+        || value === 'series'
+        || value === 'primary'
+        || value === 'secondary'
+        || value === 'white'
+        || value === 'background'
+    },
+  }
+
+  const failColumn = Object.keys(data).find((columnName: string) => {
+    // 有定義規則
+    if (rules[columnName as keyof T]) {
+      const rule: ValidatorRuleToBeTypes | ValidatorRuleToBe | ValidatorRuleToBeOption = rules[columnName as keyof T]
+      const value = data[columnName as keyof T]
+      // 測試 "toBeTypes"
+      if ((rule as ValidatorRuleToBeTypes).toBeTypes) {
+        const toBeTypes = (rule as ValidatorRuleToBeTypes).toBeTypes
+        const isCorrect = toBeTypes.some((toBeType) => testType[toBeType](value))
+        if (isCorrect === false) {
+          return true
+        }
+      }
+      // 測試 "toBe"
+      else if ((rule as ValidatorRuleToBe).toBe) {
+        const { toBe, test } = rule as ValidatorRuleToBe
+        const isCorrect = test(value)
+        if (isCorrect === false) {
+          return true
+        }
+      }
+      // 測試 "toBeOption"
+      else if ((rule as ValidatorRuleToBeOption).toBeOption) {
+        const toBeOption = (rule as ValidatorRuleToBeOption).toBeOption
+        const isCorrect = testOption[toBeOption](value)
+        if (isCorrect === false) {
+          return true
+        }
+      }
+    }
+    return false
+  })
+
+  return failColumn
+}
+
+export function validateColumns<T> (data: T, rules: Partial<ValidatorRule<T>>): ValidatorResult {
+  // if (data === undefined || data === null) {
+  //   // orbcharts所有的options都是允許空值的
+  //   return {
+  //     status: 'success',
+  //     columnName: '',
+  //     expectToBe: '',
+  //   }
+  // }
+  const invalidColumn = getInvalidColumn(data, rules)
+  if (invalidColumn) {
+    const rule = rules[invalidColumn as keyof T]
+    const expectToBe = (rule as ValidatorRuleToBeTypes).toBeTypes
+      ? (rule as ValidatorRuleToBeTypes).toBeTypes.join(' | ')
+      : (rule as ValidatorRuleToBe).toBe
+        ? (rule as ValidatorRuleToBe).toBe
+        : (rule as ValidatorRuleToBeOption).toBeOption
+          ? (rule as ValidatorRuleToBeOption).toBeOption
+          : ''
+
+    return {
+      status: 'error',
+      // message: createValidatorErrorMessage({
+      //   columnName: failColumn,
+      //   expect,
+      //   from
+      // })
+      columnName: invalidColumn as string,
+      expectToBe: expectToBe,
+    }
+  } else {
+    return {
+      status: 'success',
+      columnName: '',
+      expectToBe: '',
+    }
+  }
 }

package/tsconfig.base.json

@@ -1,14 +1,14 @@
-{
-  "compilerOptions": {
-    "outDir": "./dist/",
-    "sourceMap": true,
-    "noImplicitAny": true,
-    "module": "esnext",
-    "target": "es5",
-    "jsx": "react",
-    "allowJs": true,
-    "moduleResolution": "node",
-    "allowSyntheticDefaultImports" : true,
-    "esModuleInterop" : true
-  }
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "module": "esnext",
+    "target": "es5",
+    "jsx": "react",
+    "allowJs": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports" : true,
+    "esModuleInterop" : true
+  }
 }

package/tsconfig.json

@@ -1,3 +1,3 @@
-{
-  "extends": "./tsconfig.base.json"
+{
+  "extends": "./tsconfig.base.json"
 }

package/vite-env.d.ts

@@ -1,7 +1,7 @@
-interface ImportMetaEnv {
-  readonly MODE: 'development' | 'production'
-} 
-
-interface ImportMeta {
-  readonly env: ImportMetaEnv;
+interface ImportMetaEnv {
+  readonly MODE: 'development' | 'production'
+} 
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
 }

package/vite.config.js

@@ -1,23 +1,23 @@
-import { defineConfig } from 'vite'
-import dts from 'vite-plugin-dts'
-
-export default defineConfig(({ command, mode }) => {
-  return {
-    plugins: [
-      dts({
-        insertTypesEntry: true
-      })
-    ],
-    compilerOptions: {
-      composite: true
-    },
-    build: {
-      lib: {
-        entry: "src/index.ts",
-        name: 'orbcharts-core',
-        formats: ["es", "umd"],
-        fileName: format => `orbcharts-core.${format}.js`
-      },
-    }
-  }
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+
+export default defineConfig(({ command, mode }) => {
+  return {
+    plugins: [
+      dts({
+        insertTypesEntry: true
+      })
+    ],
+    compilerOptions: {
+      composite: true
+    },
+    build: {
+      lib: {
+        entry: "src/index.ts",
+        name: 'orbcharts-core',
+        formats: ["es", "umd"],
+        fileName: format => `orbcharts-core.${format}.js`
+      },
+    }
+  }
 })

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

@@ -1,19 +0,0 @@
-import * as d3 from 'd3';
-export declare const createAxisLinearScale: ({ maxValue, minValue, axisWidth, scaleDomain, scaleRange, }: {
-    maxValue: number;
-    minValue: number;
-    axisWidth: number;
-    scaleDomain: [number | "min" | "auto", number | "max" | "auto"];
-    scaleRange: [number, number];
-}) => d3.ScaleLinear<number, number, never>;
-export declare const createAxisPointScale: ({ axisLabels, axisWidth, padding }: {
-    axisLabels: string[];
-    axisWidth: number;
-    padding?: number;
-}) => d3.ScalePoint<string>;
-export declare const createAxisQuantizeScale: ({ axisLabels, axisWidth, padding, reverse }: {
-    axisLabels: string[] | Date[];
-    axisWidth: number;
-    padding?: number;
-    reverse?: boolean;
-}) => d3.ScaleQuantize<number, never>;

package/src/utils/d3Utils.ts

@@ -1,108 +0,0 @@
-import * as d3 from 'd3'
-import { DATA_FORMATTER_VALUE_AXIS_DEFAULT } from '../defaults'
-
-// scaleLinear - 連續資料對應到比例尺座標上
-export const createAxisLinearScale = ({
-  maxValue = 1,
-  minValue = 0,
-  axisWidth,
-  scaleDomain = DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleDomain,
-  scaleRange = DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleRange,
-}: {
-  maxValue: number
-  minValue: number
-  axisWidth: number
-  scaleDomain: [number | 'min' | 'auto', number | 'max' | 'auto']
-  scaleRange: [number, number] // 0-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' | '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
-
-  // -- 計算padding --
-  // if (padding > 0) {
-  //   const stepAmount = maxValue - minValue + (padding * 2)
-  //   const eachStepWidth = axisWidth / stepAmount
-  //   const paddingWidth = eachStepWidth * padding
-  //   rangeMinValue += paddingWidth
-  //   rangeMaxValue -= paddingWidth
-  // }
-
-  // -- 依場景大小換算 --
-  const axisDomainMinValue = maxValue - (maxValue - domainMinValue) / (1 - rangeMin)
-  const axisDomainMaxValue = domainMaxValue / rangeMax
-  
-  // return d3.scaleLinear()
-  //   .domain([domainMinValue, domainMaxValue])
-  //   .range([rangeMinValue, rangeMaxValue])
-  return d3.scaleLinear()
-    .domain([axisDomainMinValue, axisDomainMaxValue])
-    .range([0, axisWidth])
-}
-
-// scalePoint - 非連續資料對應到比例尺座標上
-export const createAxisPointScale = ({ axisLabels, axisWidth, padding = 0.5 }: {
-  axisLabels: string[]
-  axisWidth: number
-  padding?: number
-  // reverse?: boolean  
-}) => {
-  let range: [d3.NumberValue, d3.NumberValue] = [0, axisWidth]
-
-  return d3.scalePoint()
-      .domain(axisLabels)
-      .range(range)
-      .padding(padding)
-}
-
-// scaleQuantize - 比例尺座標對應非連續資料索引
-export const createAxisQuantizeScale = ({ axisLabels, axisWidth, padding = 0, reverse = false }:{
-  axisLabels: string[] | Date[],
-  axisWidth: number
-  padding?: number
-  reverse?: boolean
-}) => {
-
-  let range: number[] = axisLabels.map((d: string | Date, i: number) => i)
-  if (reverse) {
-    range.reverse()
-  }
-  // if (reverse) {
-  //   range = axisLabels.map((d: string | Date, i: number) => axisLabels.length - 1 - i)
-  // } else {
-  //   range = axisLabels.map((d: string | Date, i: number) => i)
-  // }
-  const step = range.length - 1 + (padding * 2) // 圖軸刻度分段數量
-  const stepWidth = axisWidth / step
-  const rangePadding = stepWidth * padding - (stepWidth * 0.5) // 實際要計算的範圍是圖軸左右那邊增加0.5
-
-  // console.log('rangePadding', rangePadding)
-  return d3.scaleQuantize<number>()
-    .domain([rangePadding, axisWidth - rangePadding])
-    .range(range)
-}