feat: BarChart; fix: typo; fix: color alpha (#23)

* fix(widgets): fix color alpha not applied

* fix(docs): fix typo

* feat: `BarChart`

CONTRIBUTING.md

@@ -44,7 +44,7 @@ plugins
 - mods: The offical mods of Newcar
 - packages: the core and other packages that core is dependent on or be dependented
  - basic: There are many basic figures in there, please refer to [newcar.js.org](https://newcar.js.org) to see them
-- plugions: The offcial plugins of Newcar
+- plugins: The offcial plugins of Newcar
 
 And you can custom some widget for our offical lib, the guide is in out [documentation](https://newcar.js.org).
 

examples/main.ts

@@ -1,6 +1,6 @@
-import { CarEngine, Color, Scene } from 'newcar'
+import { CarEngine, Color } from 'newcar'
 import { Angle, Brace } from '@newcar/mod-geometry'
-import { BarChart } from '@newcar/mod-chart'
+import { BarChart, ChartDataUnit, ChartUtil } from '@newcar/mod-chart'
 import { Markdown } from '@newcar/mod-markdown'
 // import { Tex } from '@newcar/mod-math'
 
@@ -74,23 +74,49 @@ const scene7 = new nc.Scene(new Brace([0, 0], [200, 200]))
 const scene8 = new nc.Scene(
  new BarChart(
  {
- labels: ['A', 'B', 'C', 'D'],
+ labels: ['AB', 'BB', 'CB', 'DB'],
  datasets: [
  {
  label: 'Series 1',
- data: [12, 19, 3, 5],
- backgroundColor: [
- Color.rgba(255, 99, 132, 0.2),
- Color.rgba(255, 159, 64, 0.2),
- Color.rgba(255, 205, 86, 0.2),
- Color.rgba(75, 192, 192, 0.2),
- ],
- borderColor: [
- Color.rgba(255, 99, 132),
- Color.rgba(255, 159, 64),
- Color.rgba(255, 205, 86),
- Color.rgba(75, 192, 192),
+ data: ChartUtil.dataUnits([12, 19, 3, 5]),
+ style: {
+ backgroundColor: Color.parse('#66CCFF').withAlpha(0.2),
+ borderColor: Color.parse('#66CCFF'),
+ borderWidth: 1,
+ },
+ },
+ {
+ label: 'Series 2',
+ data: [
+ new ChartDataUnit(12, {
+ style: {
+ backgroundColor: Color.rgba(255, 99, 132, 0.2),
+ borderColor: Color.rgba(255, 99, 132),
+ },
+ }),
+ new ChartDataUnit(19, {
+ style: {
+ backgroundColor: Color.rgba(255, 159, 64, 0.2),
+ borderColor: Color.rgba(255, 159, 64),
+ },
+ }),
+ new ChartDataUnit(3, {
+ style: {
+ backgroundColor: Color.rgba(255, 205, 86, 0.2),
+ borderColor: Color.rgba(255, 205, 86),
+ },
+ }),
+ new ChartDataUnit(5, {
+ style: {
+ backgroundColor: Color.rgba(75, 192, 192, 0.2),
+ borderColor: Color.rgba(75, 192, 192),
+ },
+ }),
  ],
+ style: {
+ backgroundColor: Color.rgba(255, 99, 132, 0.2),
+ borderColor: Color.rgba(255, 99, 132),
+ },
  },
  ],
  },

mods/mod-chart/package.json

@@ -27,7 +27,8 @@
  "dependencies": {
  "@newcar/basic": "workspace:*",
  "@newcar/core": "workspace:*",
- "@newcar/utils": "workspace:*"
+ "@newcar/utils": "workspace:*",
+ "string-width": "^7.1.0"
  },
  "devDependencies": {
  "canvaskit-wasm": "0.39.1"

mods/mod-chart/src/index.ts

@@ -1 +1,2 @@
 export * from './widgets'
+export * from './utils'

mods/mod-chart/src/utils/chartData.ts

@@ -1,13 +1,10 @@
-import type { Color } from '@newcar/utils'
+import type { ChartDataUnit } from '../widgets'
 
-export interface ChartData {
+export interface ChartData<ChartStyle> {
  labels: string[]
  datasets: {
  label: string
- data: number[]
- backgroundColor?: Color[]
- borderColor?: Color[]
- borderWidth?: number
- borderRadius?: number
+ data: ChartDataUnit<ChartStyle>[]
+ style?: ChartStyle
  }[]
 }

mods/mod-chart/src/utils/chartStyle.ts

@@ -0,0 +1,9 @@
+import type { Color } from '@newcar/utils'
+import type { WidgetStyle } from '@newcar/core'
+
+export interface ChartStyle extends WidgetStyle {
+ backgroundColor?: Color
+ borderColor?: Color
+ borderWidth?: number
+ border?: boolean
+}

mods/mod-chart/src/utils/chartUtil.ts

@@ -0,0 +1,8 @@
+import type { ChartDataOptions } from '../widgets'
+import { ChartDataUnit } from '../widgets'
+
+export class ChartUtil {
+ static dataUnits<ChartStyle>(data: number[], options?: ChartDataOptions<ChartStyle>): ChartDataUnit<ChartStyle>[] {
+ return data.map(value => new ChartDataUnit(value, options))
+ }
+}

mods/mod-chart/src/utils/index.ts

@@ -0,0 +1,4 @@
+export * from './chartData'
+export * from './chartStyle'
+export * from './chartOption'
+export * from './chartUtil'

mods/mod-chart/src/widgets/barChart.ts

@@ -1,17 +1,17 @@
 import { Figure, Rect } from '@newcar/basic'
-import type { WidgetStyle } from '@newcar/core'
 import { Color } from '@newcar/utils'
 import type { CanvasKit, Paint } from 'canvaskit-wasm'
-import type { ChartData } from '../utils/chartData'
-import type { ChartOption } from '../utils/chartOption'
+import type { ChartData, ChartOption, ChartStyle } from '../utils'
 import { ChartLayout } from './chartLayout'
 
 export interface BarChartOptions extends ChartOption {
  categoryPercentage?: number
  barPercentage?: number
 }
 
-export interface BarChartStyle extends WidgetStyle {}
+export interface BarChartStyle extends ChartStyle {
+ borderRadius?: number
+}
 
 export class BarChart extends Figure {
  declare style: BarChartStyle
@@ -23,7 +23,7 @@ export class BarChart extends Figure {
  barSets: Rect[][]
 
  constructor(
- public data: ChartData,
+ public data: ChartData<BarChartStyle>,
  options?: BarChartOptions,
  ) {
  options ??= {
@@ -45,14 +45,18 @@ export class BarChart extends Figure {
  const categorySize = gridSize * this.categoryPercentage
  const barSize = (categorySize / this.data.datasets.length) * this.barPercentage
  this.barSets = this.data.datasets.map((set, setIndex) => {
- return set.data.map((value, index) => {
+ set.style.backgroundColor ??= Color.WHITE.withAlpha(0.2)
+ set.style.borderColor ??= Color.WHITE
+ set.style.borderWidth ??= 1
+ set.style.border ??= true
+ return set.data.map((unit, index) => {
  return new Rect(
  [
  (index * this.layout.size.width) / this.data.labels.length
  + (gridSize - categorySize) / 2
  + (setIndex * categorySize) / this.data.datasets.length
  + (categorySize / this.data.datasets.length - barSize) / 2,
- this.layout.size.height - (value * this.layout.size.height) / this.layout.max,
+ this.layout.size.height - (unit.value * this.layout.size.height) / this.layout.max,
  ],
  [
  (index * this.layout.size.width) / this.data.labels.length
@@ -64,8 +68,10 @@ export class BarChart extends Figure {
  ],
  {
  style: {
- fillColor: set.backgroundColor ? set.backgroundColor[index] : Color.WHITE,
- borderColor: set.borderColor ? set.borderColor[index] : Color.WHITE,
+ fillColor: unit.style.backgroundColor ?? set.style.backgroundColor,
+ borderColor: unit.style.borderColor ?? set.style.borderColor,
+ borderWidth: unit.style.borderWidth ?? set.style.borderWidth,
+ border: unit.style.border ?? set.style.border,
  },
  },
  )
@@ -77,7 +83,11 @@ export class BarChart extends Figure {
  const categorySize = gridSize * this.categoryPercentage
  const barSize = (categorySize / this.data.datasets.length) * this.barPercentage
  this.barSets = this.data.datasets.map((set, setIndex) => {
- return set.data.map((value, index) => {
+ set.style.backgroundColor ??= Color.WHITE.withAlpha(0.2)
+ set.style.borderColor ??= Color.WHITE
+ set.style.borderWidth ??= 1
+ set.style.border ??= true
+ return set.data.map((unit, index) => {
  return new Rect(
  [
  0,
@@ -88,7 +98,7 @@ export class BarChart extends Figure {
  + this.layout.style.gridWidth / 2,
  ],
  [
- (value * this.layout.size.width) / this.layout.max,
+ (unit.value * this.layout.size.width) / this.layout.max,
  (index * this.layout.size.height) / this.data.labels.length
  + (gridSize - categorySize) / 2
  + (setIndex * categorySize) / this.data.datasets.length
@@ -97,8 +107,10 @@ export class BarChart extends Figure {
  ],
  {
  style: {
- fillColor: set.backgroundColor ? set.backgroundColor[index] : Color.WHITE,
- borderColor: set.borderColor ? set.borderColor[index] : Color.WHITE,
+ fillColor: unit.style.backgroundColor ?? set.style.backgroundColor,
+ borderColor: unit.style.borderColor ?? set.style.borderColor,
+ borderWidth: unit.style.borderWidth ?? set.style.borderWidth,
+ border: unit.style.border ?? set.style.border,
  },
  },
  )

mods/mod-chart/src/widgets/chartDataUnit.ts

@@ -0,0 +1,15 @@
+import { Widget, type WidgetOptions } from '@newcar/core'
+
+export interface ChartDataOptions<ChartStyle> extends WidgetOptions {
+ style?: ChartStyle
+}
+
+export class ChartDataUnit<ChartStyle> extends Widget {
+ declare style: ChartStyle
+
+ constructor(public value: number, options?: ChartDataOptions<ChartStyle>) {
+ options ??= {}
+ super(options)
+ this.style = options.style ?? {} as ChartStyle
+ }
+}