@orbcharts/plugins-basic 3.0.0-alpha.75 → 3.0.0-alpha.77

package/src/utils/orbchartsUtils.ts

@@ -1,100 +1,100 @@
-import type {
-  AxisPosition,
-  ColorType,
-  ChartParams,
-  ComputedDatumBase,
-  ComputedDatumSeriesValue,
-  ComputedDatumCategoryValue } from '../../lib/core-types'
-import { getMinAndMax } from './commonUtils'
-
-// 取得最小及最大值 - datum格式陣列資料
-export function getMinAndMaxValue (data: ComputedDatumBase[]): [number, number] {
-  const arr = data
-    .filter(d => d.value != null && d.visible != false)
-    .map(d => d.value as number)
-  return getMinAndMax(arr)
-}
-
-// 取得colorType顏色
-export function getColor (colorType: ColorType, fullChartParams: ChartParams) {
-  const colors = fullChartParams.colors[fullChartParams.colorScheme]
-  // 對應series資料中第1個顏色
-  if (colorType === 'series') {
-    return colors.series[0]
-  }
-  // 對應colorType設定的顏色
-  // return colors[colorType] != null
-  //   ? colors[colorType]
-  //   : colors.primary
-  return colorType == 'none'
-    ? 'none'
-    : colors[colorType] != undefined
-      ? colors[colorType]
-      : colors.primary // 如果比對不到
-}
-
-export function getSeriesValueColor () {
-
-}
-
-export function getCategoryValueColor ({ datum, colorType, fullChartParams }: { datum: ComputedDatumCategoryValue, colorType: ColorType, fullChartParams: ChartParams }) {
-
-}
-
-// // 取得Series顏色 @Q@ 待重構完後刪除
-// export function getSeriesColor (seriesIndex: number, fullChartParams: ChartParams) {
-//   const colorIndex = seriesIndex < fullChartParams.colors[fullChartParams.colorScheme].series.length
-//     ? seriesIndex
-//     : seriesIndex % fullChartParams.colors[fullChartParams.colorScheme].series.length
-//   return fullChartParams.colors[fullChartParams.colorScheme].series[colorIndex]
-// }
-
-// 取得Datum顏色 @Q@ 待重構完後刪除
-export function getDatumColor ({ datum, colorType, fullChartParams }: { datum: ComputedDatumBase, colorType: ColorType, fullChartParams: ChartParams }) {
-  // 對應series資料中的顏色
-  if (colorType === 'series') {
-    if ((datum as unknown as ComputedDatumSeriesValue).color) {
-      return (datum as unknown as ComputedDatumSeriesValue).color
-    } else {
-      // 非series類型的資料則回傳陣列中第1個顏色
-      return fullChartParams.colors[fullChartParams.colorScheme].series[0]
-    }
-  }
-  // 對應colorType設定的顏色
-  return colorType == 'none'
-    ? 'none' 
-    : fullChartParams.colors[fullChartParams.colorScheme][colorType] != undefined
-      ? fullChartParams.colors[fullChartParams.colorScheme][colorType]
-      : fullChartParams.colors[fullChartParams.colorScheme].primary
-}
-
-export function getClassName (pluginName: string, elementName: string, modifier?: string) {
-  const modifierText = modifier ? `--${modifier}` : ''
-  return `orbcharts-${pluginName}__${elementName}${modifierText}`
-}
-
-export function getUniID (pluginName: string, elementName: string) {
-  const textLength = 5
-  // 英文+數字
-  const randomText: string = Math.random().toString(36).substr(2, textLength)
-  
-  return getClassName(pluginName, elementName, randomText)
-}
-
-
-export function calcAxesSize ({ xAxisPosition, yAxisPosition, width, height }: {
-  xAxisPosition: AxisPosition
-  yAxisPosition: AxisPosition
-  width: number
-  height: number
-}) {
-  if ((xAxisPosition === 'bottom' || xAxisPosition === 'top') && (yAxisPosition === 'left' || yAxisPosition === 'right')) {
-    return { width, height }
-  } else if ((xAxisPosition === 'left' || xAxisPosition === 'right') && (yAxisPosition === 'bottom' || yAxisPosition === 'top')) {
-    return {
-      width: height,
-      height: width
-    }
-  }
-}
-
+import type {
+  AxisPosition,
+  ColorType,
+  ChartParams,
+  ComputedDatumBase,
+  ComputedDatumSeriesValue,
+  ComputedDatumCategoryValue } from '../../lib/core-types'
+import { getMinAndMax } from './commonUtils'
+
+// 取得最小及最大值 - datum格式陣列資料
+export function getMinAndMaxValue (data: ComputedDatumBase[]): [number, number] {
+  const arr = data
+    .filter(d => d.value != null && d.visible != false)
+    .map(d => d.value as number)
+  return getMinAndMax(arr)
+}
+
+// 取得colorType顏色
+export function getColor (colorType: ColorType, fullChartParams: ChartParams) {
+  const colors = fullChartParams.colors[fullChartParams.colorScheme]
+  // 對應series資料中第1個顏色
+  if (colorType === 'series') {
+    return colors.series[0]
+  }
+  // 對應colorType設定的顏色
+  // return colors[colorType] != null
+  //   ? colors[colorType]
+  //   : colors.primary
+  return colorType == 'none'
+    ? 'none'
+    : colors[colorType] != undefined
+      ? colors[colorType]
+      : colors.primary // 如果比對不到
+}
+
+export function getSeriesValueColor () {
+
+}
+
+export function getCategoryValueColor ({ datum, colorType, fullChartParams }: { datum: ComputedDatumCategoryValue, colorType: ColorType, fullChartParams: ChartParams }) {
+
+}
+
+// // 取得Series顏色 @Q@ 待重構完後刪除
+// export function getSeriesColor (seriesIndex: number, fullChartParams: ChartParams) {
+//   const colorIndex = seriesIndex < fullChartParams.colors[fullChartParams.colorScheme].series.length
+//     ? seriesIndex
+//     : seriesIndex % fullChartParams.colors[fullChartParams.colorScheme].series.length
+//   return fullChartParams.colors[fullChartParams.colorScheme].series[colorIndex]
+// }
+
+// 取得Datum顏色 @Q@ 待重構完後刪除
+export function getDatumColor ({ datum, colorType, fullChartParams }: { datum: ComputedDatumBase, colorType: ColorType, fullChartParams: ChartParams }) {
+  // 對應series資料中的顏色
+  if (colorType === 'series') {
+    if ((datum as unknown as ComputedDatumSeriesValue).color) {
+      return (datum as unknown as ComputedDatumSeriesValue).color
+    } else {
+      // 非series類型的資料則回傳陣列中第1個顏色
+      return fullChartParams.colors[fullChartParams.colorScheme].series[0]
+    }
+  }
+  // 對應colorType設定的顏色
+  return colorType == 'none'
+    ? 'none' 
+    : fullChartParams.colors[fullChartParams.colorScheme][colorType] != undefined
+      ? fullChartParams.colors[fullChartParams.colorScheme][colorType]
+      : fullChartParams.colors[fullChartParams.colorScheme].primary
+}
+
+export function getClassName (pluginName: string, elementName: string, modifier?: string) {
+  const modifierText = modifier ? `--${modifier}` : ''
+  return `orbcharts-${pluginName}__${elementName}${modifierText}`
+}
+
+export function getUniID (pluginName: string, elementName: string) {
+  const textLength = 5
+  // 英文+數字
+  const randomText: string = Math.random().toString(36).substr(2, textLength)
+  
+  return getClassName(pluginName, elementName, randomText)
+}
+
+
+export function calcAxesSize ({ xAxisPosition, yAxisPosition, width, height }: {
+  xAxisPosition: AxisPosition
+  yAxisPosition: AxisPosition
+  width: number
+  height: number
+}) {
+  if ((xAxisPosition === 'bottom' || xAxisPosition === 'top') && (yAxisPosition === 'left' || yAxisPosition === 'right')) {
+    return { width, height }
+  } else if ((xAxisPosition === 'left' || xAxisPosition === 'right') && (yAxisPosition === 'bottom' || yAxisPosition === 'top')) {
+    return {
+      width: height,
+      height: width
+    }
+  }
+}
+

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.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-plugins-basic',
-        formats: ["es", "umd"],
-        fileName: format => `orbcharts-plugins-basic.${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-plugins-basic',
+        formats: ["es", "umd"],
+        fileName: format => `orbcharts-plugins-basic.${format}.js`
+      },
+    }
+  }
 })

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

@@ -1,93 +0,0 @@
-import { ColorType } from '../../lib/core-types';
-
-export interface LinesParams {
-    lineCurve: string;
-    lineWidth: number;
-}
-export interface LineAreasParams {
-    lineCurve: string;
-    linearGradientOpacity: [number, number];
-}
-export interface DotsParams {
-    radius: number;
-    fillColorType: ColorType;
-    strokeColorType: ColorType;
-    strokeWidth: number;
-    onlyShowHighlighted: boolean;
-}
-export interface GroupAuxParams {
-    showLine: boolean;
-    showLabel: boolean;
-    lineDashArray: string;
-    lineColorType: ColorType;
-    labelColorType: ColorType;
-    labelTextColorType: ColorType;
-    labelTextFormat: string | ((text: any) => string);
-    labelPadding: number;
-    labelRotate: number;
-}
-export interface BarsParams {
-    barWidth: number;
-    barPadding: number;
-    barGroupPadding: number;
-    barRadius: number | boolean;
-}
-export interface BarsPNParams extends BarsParams {
-}
-export interface BarStackParams {
-    barWidth: number;
-    barGroupPadding: number;
-    barRadius: number | boolean;
-}
-export interface BarsTriangleParams {
-    barWidth: number;
-    barPadding: number;
-    barGroupPadding: number;
-    linearGradientOpacity: [number, number];
-}
-export interface GroupAxisParams {
-    labelOffset: [number, number];
-    labelColorType: ColorType;
-    axisLineVisible: boolean;
-    axisLineColorType: ColorType;
-    ticks: number | null | 'all';
-    tickFormat: string | ((text: any) => string);
-    tickLineVisible: boolean;
-    tickPadding: number;
-    tickFullLine: boolean;
-    tickFullLineDasharray: string;
-    tickColorType: ColorType;
-    tickTextRotate: number;
-    tickTextColorType: ColorType;
-}
-export interface ValueAxisParams {
-    labelOffset: [number, number];
-    labelColorType: ColorType;
-    axisLineVisible: boolean;
-    axisLineColorType: ColorType;
-    ticks: number | null;
-    tickFormat: string | ((text: d3.NumberValue) => string);
-    tickLineVisible: boolean;
-    tickPadding: number;
-    tickFullLine: boolean;
-    tickFullLineDasharray: string;
-    tickColorType: ColorType;
-    tickTextRotate: number;
-    tickTextColorType: ColorType;
-}
-export interface ValueStackAxisParams extends ValueAxisParams {
-}
-export interface ScalingAreaParams {
-}
-export interface GridLegendParams {
-    position: 'top' | 'bottom' | 'left' | 'right';
-    justify: 'start' | 'center' | 'end';
-    padding: number;
-    backgroundFill: ColorType;
-    backgroundStroke: ColorType;
-    gap: number;
-    listRectWidth: number;
-    listRectHeight: number;
-    listRectRadius: number;
-    textColorType: ColorType;
-}

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

@@ -1,61 +0,0 @@
-import { BaseBarsParams } from '../base/BaseBars';
-import { BaseBarStackParams } from '../base/BaseBarStack';
-import { BaseBarsTriangleParams } from '../base/BaseBarsTriangle';
-import { BaseLinesParams } from '../base/BaseLines';
-import { BaseLineAreasParams } from '../base/BaseLineAreas';
-import { BaseDotsParams } from '../base/BaseDots';
-import { BaseGroupAxisParams } from '../base/BaseGroupAxis';
-import { BaseValueAxisParams } from '../base/BaseValueAxis';
-import { ColorType } from '../../lib/core-types';
-
-export interface MultiGridLegendParams {
-    position: 'top' | 'bottom' | 'left' | 'right';
-    justify: 'start' | 'center' | 'end';
-    padding: number;
-    backgroundFill: ColorType;
-    backgroundStroke: ColorType;
-    gap: number;
-    listRectWidth: number;
-    listRectHeight: number;
-    listRectRadius: number;
-    gridList: Array<{
-        listRectWidth: number;
-        listRectHeight: number;
-        listRectRadius: number;
-    }>;
-    textColorType: ColorType;
-}
-export interface MultiGroupAxisParams extends BaseGroupAxisParams {
-    gridIndexes: number[] | 'all';
-}
-export interface MultiValueAxisParams extends BaseValueAxisParams {
-    gridIndexes: number[] | 'all';
-}
-export interface MultiValueStackAxisParams extends BaseValueAxisParams {
-    gridIndexes: number[] | 'all';
-}
-export interface MultiBarsParams extends BaseBarsParams {
-    gridIndexes: number[] | 'all';
-}
-export interface MultiBarStackParams extends BaseBarStackParams {
-    gridIndexes: number[] | 'all';
-}
-export interface MultiBarsTriangleParams extends BaseBarsTriangleParams {
-    gridIndexes: number[] | 'all';
-}
-export interface MultiLinesParams extends BaseLinesParams {
-    gridIndexes: number[] | 'all';
-}
-export interface MultiLineAreasParams extends BaseLineAreasParams {
-    gridIndexes: number[] | 'all';
-}
-export interface MultiDotsParams extends BaseDotsParams {
-    gridIndexes: number[] | 'all';
-}
-export interface OverlappingValueAxesParams {
-    firstAxis: BaseValueAxisParams;
-    secondAxis: BaseValueAxisParams;
-    gridIndexes: [number, number];
-}
-export interface OverlappingValueStackAxesParams extends OverlappingValueAxesParams {
-}

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

@@ -1,24 +0,0 @@
-import { ColorType, ChartType, EventTypeMap } from '../../lib/core-types';
-
-export interface ContainerPluginParams {
-    header: {
-        height: number;
-        text: string[];
-        textStyle: string[];
-    };
-    footer: {
-        height: number;
-        text: string[];
-        textStyle: string[];
-    };
-}
-export type TooltipParams = {
-    backgroundColorType: ColorType;
-    backgroundOpacity: number;
-    strokeColorType: ColorType;
-    textColorType: ColorType;
-    offset: [number, number];
-    padding: number;
-    textRenderFn: (<T extends ChartType>(eventData: EventTypeMap<T>) => string[] | string) | null;
-    svgRenderFn: (<T extends ChartType>(eventData: EventTypeMap<T>) => string) | null;
-};

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

@@ -1,73 +0,0 @@
-import { ComputedDatumSeries, EventSeries, EventName, ColorType } from '../../lib/core-types';
-
-export type ArcScaleType = 'area' | 'radius';
-export interface BubblesParams {
-    force: {
-        strength: number;
-        velocityDecay: number;
-        collisionSpacing: number;
-    };
-    bubbleText: {
-        fillRate: number;
-        lineHeight: number;
-        lineLengthMin: number;
-    };
-    arcScaleType: ArcScaleType;
-}
-export interface PieParams {
-    outerRadius: number;
-    innerRadius: number;
-    outerRadiusWhileHighlight: number;
-    startAngle: number;
-    endAngle: number;
-    padAngle: number;
-    strokeColorType: ColorType;
-    strokeWidth: number;
-    cornerRadius: number;
-}
-export interface PieEventTextsParams {
-    eventFn: (d: EventSeries, eventName: EventName, t: number) => string[];
-    textAttrs: Array<{
-        [key: string]: string | number;
-    }>;
-    textStyles: Array<{
-        [key: string]: string | number;
-    }>;
-}
-export interface PieLabelsParams {
-    outerRadius: number;
-    outerRadiusWhileHighlight: number;
-    startAngle: number;
-    endAngle: number;
-    labelCentroid: number;
-    labelFn: ((d: ComputedDatumSeries) => string);
-    labelColorType: ColorType;
-}
-export interface RoseParams {
-    outerRadius: number;
-    padAngle: number;
-    strokeColorType: ColorType;
-    strokeWidth: number;
-    cornerRadius: number;
-    arcScaleType: ArcScaleType;
-    angleIncreaseWhileHighlight: number;
-}
-export interface RoseLabelsParams {
-    outerRadius: number;
-    labelCentroid: number;
-    labelFn: ((d: ComputedDatumSeries) => string);
-    labelColorType: ColorType;
-    arcScaleType: ArcScaleType;
-}
-export interface SeriesLegendParams {
-    position: 'top' | 'bottom' | 'left' | 'right';
-    justify: 'start' | 'center' | 'end';
-    padding: number;
-    backgroundFill: ColorType;
-    backgroundStroke: ColorType;
-    gap: number;
-    listRectWidth: number;
-    listRectHeight: number;
-    listRectRadius: number;
-    textColorType: ColorType;
-}

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

@@ -1,21 +0,0 @@
-import { ColorType, ComputedDataTree } from '../../lib/core-types';
-
-export interface TreeMapParams {
-    paddingInner: number;
-    paddingOuter: number;
-    labelColorType: ColorType;
-    squarifyRatio: number;
-    sort: (a: ComputedDataTree, b: ComputedDataTree) => number;
-}
-export interface TreeLegendParams {
-    position: 'top' | 'bottom' | 'left' | 'right';
-    justify: 'start' | 'center' | 'end';
-    padding: number;
-    backgroundFill: ColorType;
-    backgroundStroke: ColorType;
-    gap: number;
-    listRectWidth: number;
-    listRectHeight: number;
-    listRectRadius: number;
-    textColorType: ColorType;
-}

package/src/grid/types.ts

@@ -1,124 +0,0 @@
-import type { ColorType } from '../../lib/core-types'
-// import type { BaseLegendParams } from '../base/BaseLegend'
-
-// export type LineType = 'line' | 'area' | 'gradientArea'
-// export type BarType = 'rect' | 'triangle'
-
-export interface LinesParams {
-  lineCurve: string
-  lineWidth: number
-  // labelFn: (d: ComputedDatumSeries) => string
-  // labelPositionFn: (d: ComputedDatumSeries) => 'top' | 'bottom' | 'left' | 'right' | 'center'
-  // labelStyleFn: (d: ComputedDatumSeries) => string
-  // labelFontSizeFn: (d: ComputedDatumSeries) => number
-  // labelColorFn: (d: ComputedDatumSeries) => string
-  // labelPadding: number
-}
-
-export interface LineAreasParams {
-  lineCurve: string
-  linearGradientOpacity: [number, number]
-}
-
-export interface DotsParams {
-  radius: number
-  fillColorType: ColorType
-  strokeColorType: ColorType
-  strokeWidth: number
-  // strokeWidthWhileHighlight: number
-  onlyShowHighlighted: boolean
-}
-
-export interface GroupAuxParams {
-  showLine: boolean
-  showLabel: boolean
-  lineDashArray: string
-  lineColorType: ColorType
-  labelColorType: ColorType
-  labelTextColorType: ColorType
-  labelTextFormat: string | ((text: any) => string)
-  labelPadding: number
-  labelRotate: number
-}
-
-export interface BarsParams {
-  // barType: BarType
-  barWidth: number
-  barPadding: number
-  barGroupPadding: number // 群組和群組間的間隔
-  barRadius: number | boolean
-}
-
-export interface BarsPNParams extends BarsParams {}
-
-export interface BarStackParams {
-  barWidth: number
-  barGroupPadding: number
-  barRadius: number | boolean
-}
-
-export interface BarsTriangleParams {
-  barWidth: number
-  barPadding: number
-  barGroupPadding: number // 群組和群組間的間隔
-  linearGradientOpacity: [number, number]
-}
-
-export interface GroupAxisParams {
-  // xLabel: string
-  // labelAnchor: 'start' | 'end'
-  labelOffset: [number, number]
-  labelColorType: ColorType
-  axisLineVisible: boolean
-  axisLineColorType: ColorType
-  ticks: number | null | 'all'
-  tickFormat: string | ((text: any) => string)
-  tickLineVisible: boolean
-  tickPadding: number
-  tickFullLine: boolean
-  tickFullLineDasharray: string
-  tickColorType: ColorType
-  // axisLineColor: string
-  // axisLabelColor: string
-  tickTextRotate: number
-  tickTextColorType: ColorType
-}
-
-export interface ValueAxisParams {
-  // xLabel: string
-  // labelAnchor: 'start' | 'end'
-  labelOffset: [number, number]
-  labelColorType: ColorType
-  axisLineVisible: boolean
-  axisLineColorType: ColorType
-  ticks: number | null
-  tickFormat: string | ((text: d3.NumberValue) => string)
-  tickLineVisible: boolean
-  tickPadding: number
-  tickFullLine: boolean
-  tickFullLineDasharray: string
-  tickColorType: ColorType
-  // axisLineColor: string
-  // axisLabelColor: string
-  tickTextRotate: number
-  tickTextColorType: ColorType
-}
-
-export interface ValueStackAxisParams extends ValueAxisParams {}
-
-export interface ScalingAreaParams {
-
-}
-
-export interface GridLegendParams {
-  position: 'top' | 'bottom' | 'left' | 'right'
-  justify: 'start' | 'center' | 'end'
-  padding: number
-  backgroundFill: ColorType
-  backgroundStroke: ColorType
-  gap: number
-  listRectWidth: number
-  listRectHeight: number
-  listRectRadius: number
-  textColorType: ColorType
-}