@orbcharts/core 3.0.0-alpha.21 → 3.0.0-alpha.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/core",
-  "version": "3.0.0-alpha.21",
+  "version": "3.0.0-alpha.23",
   "description": "OrbCharts is an open source chart library based on d3.js and rx.js",
   "author": "Blue Planet Inc.",
   "license": "Apache-2.0",
@@ -31,6 +31,7 @@
     "@types/d3": "^7.4.0",
     "ts-loader": "^9.4.2",
     "typescript": "^5.0.4",
+    "vite": "^5.3.5",
     "vite-plugin-dts": "^3.7.3"
   },
   "dependencies": {

package/src/base/createBaseChart.ts

@@ -103,8 +103,8 @@ export const createBaseChart: CreateBaseChart = <T extends ChartType>({ defaultD
       .attr('xmls', 'http://www.w3.org/2000/svg')
       .attr('version', '1.1')
       .style('position', 'absolute')
-      .style('width', '100%')
-      .style('height', '100%')
+      // .style('width', '100%')
+      // .style('height', '100%')
       .classed('orbcharts__root', true)
     // 傳入操作的 selection
     const selectionLayout = svgSelection.append('g')
@@ -226,6 +226,11 @@ export const createBaseChart: CreateBaseChart = <T extends ChartType>({ defaultD
       }),
       shareReplay(1)
     )
+    layout$.subscribe(d => {
+      svgSelection
+        .attr('width', d.rootWidth)
+        .attr('height', d.rootHeight)
+    })
 
     // -- computedData --
     const computedData$: Observable<ComputedDataTypeMap<T>> = combineLatest({

package/src/defaults.ts

@@ -61,14 +61,14 @@ export const CHART_PARAMS_DEFAULT: ChartParams = {
       series: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
       primary: '#454545',
       secondary: '#e1e1e1',
-      white: '#f0f0f0',
+      white: '#ffffff',
       background: '#ffffff'
     },
     dark: {
       series: ['#67B7DC', '#6794DC', '#6771DC', '#8067DC', '#A367DC', '#C767DC', '#DC67CE', '#DC67AB', '#DC6788', '#DC6967', '#DC8C67', '#DCAF67'],
       primary: '#f0f0f0',
       secondary: '#e1e1e1',
-      white: '#f0f0f0',
+      white: '#ffffff',
       background: '#000000'
     }
   },
@@ -163,7 +163,11 @@ export const DATA_FORMATTER_SERIES_DEFAULT: DataFormatterSeries = {
   //   return dataFormatter.seriesLabels[seriesIndex]
   // },
   colorsPredicate: (datum, rowIndex, columnIndex, { chartParams }) => {
-    return chartParams.colors[chartParams.colorScheme].series[rowIndex]
+    return rowIndex < chartParams.colors[chartParams.colorScheme].series.length
+      ? chartParams.colors[chartParams.colorScheme].series[rowIndex]
+      : chartParams.colors[chartParams.colorScheme].series[
+        rowIndex % chartParams.colors[chartParams.colorScheme].series.length
+      ]
   },
   sort: null,
 }

package/src/types/Data.ts

@@ -6,7 +6,7 @@ import { DataMultiValue, DataMultiValueDatum, DataMultiValueValue } from './Data
 import { DataTree, DataTreeDatum, DataTreeObj } from './DataTree'
 import { DataRelationship, Node, Edge } from './DataRelationship'
 
-// 基本欄位（皆為可選，無填寫則在 formatXX 程式中產生預設值）
+// 基本欄位（皆為可選，無填寫則在計算時產生預設值）
 export interface DatumBase {
   id?: string
   label?: string

package/.gitignore

@@ -1,23 +0,0 @@
-.DS_Store
-node_modules
-/dist
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-# Editor directories and files
-.idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?