@orbcharts/plugins-basic 3.0.0-alpha.38 → 3.0.0-alpha.40

package/src/tree/plugins/TreeMap.ts

@@ -11,13 +11,14 @@ import {
   distinctUntilChanged } from 'rxjs'
 import {
   defineTreePlugin } from '@orbcharts/core'
-import type { Layout, ComputedDataTree, DataFormatterTree, ChartParams } from '../../../../orbcharts-core/src'
+import type { Layout, ComputedDataTree, DataFormatterTree, ChartParams } from '@orbcharts/core'
 import type { TreeMapParams } from '../types'
 import { DEFAULT_TREE_MAP_PARAMS } from '../defaults'
 import { getClassName, getColor } from '../../utils/orbchartsUtils'
 
 const pluginName = 'TreeMap'
 const treeClassName = getClassName(pluginName, 'tree')
+const tileClassName = getClassName(pluginName, 'tile')
 
 function renderTree ({ selection, treeData, fullParams, fullChartParams }: {
   selection: d3.Selection<any, any, any, any>
@@ -40,11 +41,12 @@ function renderTree ({ selection, treeData, fullParams, fullChartParams }: {
       const eachCell = d3.select(nodes[i])
 
       const tile = eachCell
-        .selectAll<SVGRectElement, d3.HierarchyRectangularNode<ComputedDataTree>>('rect')
+        .selectAll<SVGRectElement, d3.HierarchyRectangularNode<ComputedDataTree>>(`rect.${tileClassName}`)
         .data([d], d => d.data.id)
         .join('rect')
         .attr("id", d => d.data.id)
-        .attr("class", "tile")
+        .attr("class", tileClassName)
+        .attr('cursor', 'pointer')
         .attr("width", (d) => d.x1 - d.x0)
         .attr("height", (d) => d.y1 - d.y0)
         .attr('fill', d => d.data.color)
@@ -80,7 +82,7 @@ function renderTree ({ selection, treeData, fullParams, fullChartParams }: {
               let tspan = textElement
                 .text(null)
                 .append("tspan")
-                .attr('cursor', 'default')
+                .attr('cursor', 'pointer')
                 .attr('fill', getColor(fullParams.labelColorType, fullChartParams))
                 .attr('font-size', fullChartParams.styles.textSize)
                 .attr("x", x)
@@ -96,7 +98,7 @@ function renderTree ({ selection, treeData, fullParams, fullChartParams }: {
                   dy += lineHeight
                   tspan = textElement
                     .append("tspan")
-                    .attr('cursor', 'default')
+                    .attr('cursor', 'pointer')
                     .attr('fill', getColor(fullParams.labelColorType, fullChartParams))
                     .attr('font-size', fullChartParams.styles.textSize)
                     .attr("x", x)

package/src/tree/types.ts

@@ -1,5 +1,4 @@
-import type { ColorType } from '@orbcharts/core'
-import type { ComputedDataTree } from '../../../orbcharts-core/src'
+import type { ColorType, ComputedDataTree } from '@orbcharts/core'
 
 export interface TreeMapParams {
   paddingInner: number
@@ -19,5 +18,6 @@ export interface TreeLegendParams {
   listRectWidth: number
   listRectHeight: number
   listRectRadius: number
+  textColorType: ColorType
 }
 

package/src/utils/orbchartsUtils.ts

@@ -1,4 +1,10 @@
-import type { AxisPosition, ColorType, ChartParams, ComputedDatumBase, ComputedDatumSeriesValue } from '@orbcharts/core'
+import type {
+  AxisPosition,
+  ColorType,
+  ChartParams,
+  ComputedDatumBase,
+  ComputedDatumSeriesValue,
+  ComputedDatumCategoryValue } from '@orbcharts/core'
 import { getMinAndMax } from './commonUtils'
 
 // 取得最小及最大值 - datum格式陣列資料
@@ -27,15 +33,23 @@ export function getColor (colorType: ColorType, fullChartParams: ChartParams) {
       : colors.primary // 如果比對不到
 }
 
-// 取得Series顏色
-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]
+export function getSeriesValueColor () {
+
 }
 
-// 取得Datum顏色
+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') {

package/tsconfig.json

@@ -9,6 +9,9 @@
     "allowJs": true,
     "moduleResolution": "node",
     "allowSyntheticDefaultImports" : true,
-    "esModuleInterop" : true
+    "esModuleInterop" : true,
+    "paths":{
+      "@orbcharts/core": ["./../orbcharts-core/src"]
+    }
   }
 }